所有複選框顯示爲選中狀態。 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">