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模型=“计算”工作，似乎Vue不允许这样的事情。

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

这里是显示了同样的问题的其他的jsfiddle，但更多的代码，我试图用计算的特性来构建一个“选择”产品数组变量：https://jsfiddle.net/El_Matella/s2u8syb3/

谢谢您的回答，有一个美好的一天！

Answer 1

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

您可以使用computed setter来设置该值（目前，您只有一个吸气剂）。您需要有一个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

1. 你错过拼写computed。这里Computed Properties

2. 我想你想检查产品列表中的一个项目， 因此，它可以显示在选定的列表中。

   而且你也想从两个列表中检查它。因此你不需要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>