v-on:click 不适用于简单 Vue 应用程序上的按钮

Question

这是一个基本的 vue.js 项目，我在页面上添加了一个按钮。单击按钮时，showProduct 属性设置为 true 或 false。 html部分如下

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

Vue对象如下

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

问题：单击按钮时属性未更新。我尝试使用return this.showProduct = this.showProduct ? false: true;，但问题仍未解决。

如果我打开 Vue 开发工具并在“组件”选项卡中单击 Root 组件，则值会更改一次。如果再次单击该按钮几次，则该值不会改变。只有当我第一次单击页面上的按钮，然后单击开发工具中的 Root 组件时，它才会发生变化。如果根 Root 组件被点击两次，该值不会改变。

Answer 1

它工作正常。您也可以在此处运行此代码 sn-p 来验证

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>

Answer 2

您实际上不需要单一分配的方法。见下sn-p

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>