v-on:click is not working for a button on simple Vue app

1
votes

This is a basic vue.js project where I have added a button on the page. When the button is clicked, the showProduct property is set to either true or false. The html part is as below

    <div id="app">
        <button v-on:click="showCheckout">Click Me</button>
    </div>

The Vue object is as follows

    <script>
        const store = new Vue({
        el: '#app',
        data: {
            showProduct:true,
        },
    
        methods: {
            showCheckout: function() {
                this.showProduct = this.showProduct ? false: true;
            }
        }
        });
    </script>

Problem: The property is not updated when the button is clicked. I have tried to use return this.showProduct = this.showProduct ? false: true; but the issue remained unsolved.

If I open the Vue dev tools and in the Components tab I click the Root component the value changes once. If the button is clicked again several times the value does not change. It only changes when I first click the button on the page and then click the Root component in dev tools. If the root Root component is clicked twice, the value does not change.

2
javascriptvue.js
It works perfectly on my side. – Derlin
@Derlin I tried clearing out the browser cache. Restarted the browser but the issue still remained there. When I viewed the showedProduct in chrome console, the property was changing but the Root component of my application was not updating the property. When the Root component is clicked from Vue dev tools the value is changed once – Atif Bashir

2 Answers

0
votes

Its working fine. You can run this code snippet here as well to verify

const store = new Vue({
        el: '#app',
        data: {
            showProduct:true,
        },
    
        methods: {
            showCheckout: function() {
                this.showProduct = this.showProduct ? false: true;
            }
        }
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button v-on:click="showCheckout">Click Me</button>
  {{showProduct}}
</div>
0
votes

You actually don't need a method for single assignment. See below snippet

new Vue({
  el: "#app",
  data() {
    return {
      showProduct: false
    }
  }
})
   

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 <div id="app">
    <h1 v-if="showProduct" > My product </h1>
    <button v-on:click="showProduct = !showProduct">Click Me</button>
</div>