Question

我在使用vue，checkboxes和computed属性时遇到了一些问题。

我做了一个非常小的例子来说明我的问题：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 =“计算”工作，似乎Vue不允许这样的事情。

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

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

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

Answer 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>

Answer 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>

Vue JS，复选框和计算属性

2 个答案: