javascript - Vue JS、复选框和计算属性

Question

我在使用 vue、复选框和计算属性时遇到了一些问题。

我做了一个非常小的例子来说明我的问题:https://jsfiddle.net/El_Matella/s2u8syb3/1/

这是 HTML 代码:

<div id="general">
  Variable: 
  <input type="checkbox" v-model="variable">
  Computed:
  <input type="checkbox" v-model="computed()">
</div>

以及 Vue 代码:

new Vue({
    el: '#general',
  data: {
    variable: true
  },
  compute: {
    computed: function() {
        return true;
    }
  }
})

问题是，我无法使 v-model="computed"工作，似乎 Vue 不允许这样的事情。

所以我的问题是，如何利用计算数据的优势并将其应用于复选框？

这是另一个显示相同问题的 jsfiddle，但代码更多，我试图使用计算属性来构建“选定的”产品数组变量:https://jsfiddle.net/El_Matella/s2u8syb3/

感谢您的回答，祝您有愉快的一天!

Answer 1

计算属性基本上是JavaScript getters and setters , 它们像常规属性一样使用。

您可以使用 computed setter设置值(目前，你只有一个 setter/getter )。您将需要一个 data 或 props 属性，您可以在其中保存模型的更改，因为 getter 和 setter 没有固有状态。

new Vue({
    el: '#general',
  data: {
    variable: true,
    cmpVariable: true,
  },
  computed: { // "computed" instead of "compute"
    cmp: {
      get: function() {
          return this.$data.cmpVariable;
      },
      set: function(val) {
          this.$data.cmpVariable = val;
      },
    }
  }
});

此外，您不需要用方括号调用计算(因为它的行为类似于常规属性):

<div id="general">
  Variable: 
  <input type="checkbox" v-model="variable">
  Computed:
  <input type="checkbox" v-model="cmp">
</div>