Vue JS、复选框和计算属性答案

【问题标题】：Vue JS, checkboxes and computed propertiesVue JS、复选框和计算属性
【发布时间】：2016-04-18 08:08:43
【问题描述】：

我在使用 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/

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

您可以使用computed 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>

【讨论】：

我试过了，但是在取消选中复选框时，set() 永远不会触发。

【解决方案2】：

你拼错了computed。这里Computed Properties
我猜你想检查产品列表中的一个项目，所以可以显示在选中的列表中。

您还想从两个列表中检查它。

因此您不需要computed property。

对于复选框，您可以通过使用v-model 引用它来轻松更改所选集，并将value 设置为您想要放入集中的内容。

在你的情况下，这是product.id。

您可能希望将对象本身保存在selectedProducts 列表中，但我强烈建议你不要这样做。在某些情况下，由于对象是可变的，它会导致意想不到的结果。

所以这样写就行了。

new Vue({
  el: '#general',
  data: {
    products: [{
      id: 1
    }, {
      id: 2
    }],
    selectedProducts: []
  }
})

<script src="//cdn.bootcss.com/vue/1.0.13/vue.min.js"></script>
<h1>Hello</h1>
<div id="general">
  <h2>Products</h2>
  <ul>
    <li v-for="product in products">
      <input v-model="selectedProducts" value="{{product.id}}" type="checkbox">{{ product.id }}
    </li>
  </ul>
  <h2>Selected Products</h2>
  <ul>
    <li v-for="p in selectedProducts">
      <input v-model="selectedProducts" value="{{p}}" type="checkbox">{{ p }}
    </li>
  </ul>
</div>

【讨论】：