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，但代码更多，我试图使用计算属性来构建 "selected" 产品数组变量：https://jsfiddle.net/El_Matella/s2u8syb3/

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

Answer 1

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

您可以使用一个computed setter来设置值（目前，您只有一个getter）。您将需要一个 data 或 props 属性来保存模型的更改，因为 getters 和 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

你miss-spelledcomputed。这里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、复选框和计算属性

Vue JS, checkboxes and computed properties

javascript

vue.js