@click event is not working in vue.js applicaton

Question

I need to change the {{message}} on the click of a button with a alert box. No alert box is showing and the message is also not changing.
I am new to vue world, the other examples are working but there is a problem with this file only.
I have used the directive "v-once" on the message tag inside the <h1> tag, the <h2> doesn't have "v-once".
Please reply me what I have done wrong in the code below.

 <!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/[email protected]/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>

Your button on which you call the method is outside the app div — R.K.Saini
– R.K.Saini, Commented Dec 19, 2019 at 12:44
You're using a Vue version that's over 3 years old, and the same with bootstrap. If you're just starting to learn Vue i would suggest using the latest version so that the current documentation is more accurate. — Hiws
– Hiws, Commented Dec 19, 2019 at 12:49
Thank you all, error got resolved, my button was outside the scope of app div — GAURAV PAWAR
– GAURAV PAWAR, Commented Dec 19, 2019 at 12:50
I was watching a 3 year old tutorial on youtube by DevMarketer, I will surely use the latest version of Vue, Thank you — GAURAV PAWAR
– GAURAV PAWAR, Commented Dec 19, 2019 at 12:52

Loi Nguyen Huynh · Accepted Answer · 2019-12-19 12:45:22Z

The problem with your code is that you put the button outside of div#app so the Vue instance doesn't affect it. Just move the button to be inside div#app and it'll work

<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/[email protected]"></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>

Collectives™ on Stack Overflow

@click event is not working in vue.js applicaton

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related