时间戳

首页 > 解决方案 > 为什么从计算切换到方法时，以下 Vue.js 代码不起作用？

vue.js - 为什么从计算切换到方法时，以下 Vue.js 代码不起作用？

问题描述

在以下代码中：

https://jsfiddle.net/willywg/2g7m5qy5/

该按钮根据复选框的状态被禁用。

但是当我改变时：

  computed: {
    isDisabled: function(){
        return !this.terms;
    }
  }

至

  methods: {
    isDisabled: function(){
        return !this.terms;
    }
  }

启用/禁用不再起作用。

为什么是这样？

根据文档：

https://vuejs.org/v2/guide/computed.html

在这个例子中两者不应该相同吗？

标签： vue.js

解决方案

计算属性会查找更改，但需要使用 @change 或 @click 之类的方法调用方法。在这种情况下，您实际上可以只绑定您的数据对象而无需任何一个。

<div id="app">
  <p>
    <label for='terms'>
      <input id='terms' type='checkbox' v-model='terms' /> I accept terms!!!
    </label>
  </p>
  <button :disabled='!terms'>Send Form</button>
</div>

new Vue({
  el: '#app',
  data: {
    terms: false
  }
})

推荐阅读