Muszę zmienić {{wiadomość}} jednym kliknięciem przycisku z oknem alertu. Nie wyświetla się żadne okno alertu, a wiadomość również się nie zmienia.
Jestem nowy w świecie vue, inne przykłady działają, ale jest problem tylko z tym plikiem.
Użyłem dyrektywy "v-once" na etykiecie wiadomości wewnątrz znacznika <h1>, <h2> nie ma "v-once".
Proszę o odpowiedź, co zrobiłem źle w poniższym kodzie.

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Vue.js Tutorial | Directives</title>

          <script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      </head>

      <body>
        <div id="app">
          <h1 v-once>{{message}}</h1>
          <h2>{{message}}</h2>
          <h5 v-show="viewed" v-html="intro"></h5>
        </div>
        <button @click="rewrite" type="button" name="button" >Change</button>
      </body>



      <script>
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue World',
            intro: 'Welcome to the Tutorial <small>It is all about Vue.js</small>',
            viewed: true,
          },
          methods: {
            rewrite: function () {
              alert('Button Clicked!'),
              this.message = 'Bye vue World!!!',
            },
          },
        });
      </script>

    </html>
2
GAURAV PAWAR 19 grudzień 2019, 15:33
Jakie błędy widzisz w konsoli przeglądarki?
 – 
Ahmad Mobaraki
19 grudzień 2019, 15:38
2
Twój przycisk, na którym wywołujesz metodę, znajduje się poza aplikacją div
 – 
R.K.Saini
19 grudzień 2019, 15:44
1
Używasz wersji Vue starszej niż 3 lata i to samo dotyczy wersji bootstrap. Jeśli dopiero zaczynasz uczyć się Vue, sugerowałbym użycie najnowszej wersji, aby aktualna dokumentacja była dokładniejsza.
 – 
Hiws
19 grudzień 2019, 15:49
1
Dziękuję wszystkim, błąd został rozwiązany, mój przycisk był poza zakresem div aplikacji
 – 
GAURAV PAWAR
19 grudzień 2019, 15:50
1
Oglądałem 3 letni samouczek na youtube autorstwa DevMarketera, na pewno skorzystam z najnowszej wersji Vue, dziękuję
 – 
GAURAV PAWAR
19 grudzień 2019, 15:52

1 odpowiedź

Problem z Twoim kodem polega na tym, że umieszczasz przycisk poza div#app, aby instancja Vue nie miała na niego wpływu. Po prostu przesuń przycisk, aby znaleźć się w środku div#app i będzie działać

<body>
  <div id="app">
    <h1 v-once>{{message}}</h1>
    <h2>{{message}}</h2>
    <h5 v-show="viewed" v-html="intro"></h5>
    // move button into here
    <button @click.prevent="rewrite" type="button" name="button">Change</button> 
  </div>
</body>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vue.js Tutorial | Directives</title>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div id="app">
    <h1 v-once>{{message}}</h1>
    <h2>{{message}}</h2>
    <h5 v-show="viewed" v-html="intro"></h5>
    <button @click.prevent="rewrite" type="button" name="button">Change</button>
  </div>
</body>



<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue World',
      intro: 'Welcome to the Tutorial <small>It is all about Vue.js</small>',
      viewed: true,
    },
    methods: {
      rewrite: function() {
        alert('Button Clicked!')
        this.message = 'Bye vue World!!!'
      },
    },
  });
</script>

</html>
4
Loi Nguyen Huynh 19 grudzień 2019, 15:45