所有复选框都已选中。 VueJs VueMaterial

【问题标题】：All the checkboxes appear checked. VueJs VueMaterial所有复选框都已选中。 VueJs VueMaterial
【发布时间】：2017-05-30 13:17:48
【问题描述】：

我试图只选中一个复选框，但是当我选中它时，其余的也会被选中。为什么会这样？任何类型的文档？

<md-layout v-for="Location in Locations" :key="Location.id">
  <md-checkbox v-model="checkbox" class="md-warn">{{ Location.city }}</md-checkbox>
</md-layout>

data () {
  return {
    checkbox: false,
    Locations: [{
      id: 1,
      city: '1'
    }, {
      id: 2,
      city: '2'
    }, {
      id: 3,
      city: '3'
    }, {
      id: 4,
      city: '4'
    }, {
      id: 5,
      city: '5'
    }, {
      id: 6,
      city: '6'
    }]

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-material

【解决方案1】：

由于每个复选框的v-model 是变量checkbox，因此该变量的值被绑定到每个组件。您希望每个复选框组件的 v-model 都有自己的变量来引用。

您可以将 checkbox 布尔值转换为 checkboxes 对象，每个位置 ID 都有索引键：

data() {
  return {
    checkboxes: {
      1: false,
      2: false,
      3: false,
      4: false,
      5: false,
      6: false,
    },
    ...

然后在您的模板中，通过Location.id 引用每个checkboxes 属性值：

<md-checkbox v-model="checkboxes[Location.id]" class="md-warn">

或者，如果您不介意影响 Locations 数据属性，您可以简单地绑定到每个位置的 selected 属性：

<md-checkbox v-model="Location.selected" class="md-warn">

【讨论】：

太棒了！完美运行！ :) 谢谢