所有复选框显示为选中状态。 VueJs VueMaterial

Question

我想检查只是一个复选框，但是当我检查它时，其余的检查也是如此。为什么会发生？任何类型的文件？

<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' 
    }] 

Answer 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数据属性，您可以简单地bi nd到selected财产的每个位置：

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