Vue.js Vue复选框未随数据更改而更新

Vue中的数据在更新UI时出现问题，但似乎只有复选框存在此问题

我试图一次只允许选中一个复选框，因此我在单击其中一个复选框时将所有复选框设置为false。但是，这在数据中有效，但在复选框中无法正确呈现

HTML:

只有复选框似乎有问题。如果我更改名称，或者使用过滤数组将它们全部设置为特定值的文本值，它们会更改，但复选框数据更改不会反映在UI中，但是Vue中的数据是正确的。

来自

• 文本和文本区域元素使用值属性和输入事件
• 复选框和单选按钮使用选中的属性和更改事件
• 选择字段使用值作为道具，使用更改作为事件

---

我无法从您的代码中完全弥补这一点，但您确定viewmodel加载时对象中的属性为_primary吗？例如，this.selectedlandowns.push（{Name:'John'，is_primary:false，…}）应该包含is_primary字段，以使其成为被动的

---

如果没有，则应使用Vue.set（项“is_primary”，false）使其成为反应性的。

也尝试使用checked。没有更改任何内容。SelectedLandordors是一个由Vue循环的对象数组；在选中/取消选中之前，数组的每个项中都存在一个主属性吗？似乎this.selectedlandowns=this.selectedlandowns.filter（item=>{item.is\u primary=false；return item}）根本不过滤项，只是在每个项中旋转主属性。是故意的吗？对不起，打字错误。那应该是地图。是的，在选中/取消选中之前，对象上是否存在_primary。

<table class="buildings-modify--table table-full table-spacing">
    <thead>
       <tr>
          <th>Name</th>
          <th>Primary</th>
          <th>Address</th>
          <th>City/Town</th>
          <th>Province</th>
          <th>Postal Code</th>
          <th>Phone</th>
          <th>Active</th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="landlord in selectedLandlords" :key="landlord.id">
         <td>{{ landlord.name }}</td>
         <td>                            
           <input type="checkbox" :value="landlord.is_primary" @change.prevent="makePrimaryLandlord(landlord)">
         </td>
         <td>{{ landlord.address }}</td>
         <td>{{ landlord.city }}</td>
         <td>{{ landlord.province}}</td>
         <td>{{ landlord.postal_code}}</td>
         <td>{{ landlord.phone }}</td>
         <td>{{ landlord.is_active ? "Yes" : "No" }}</td>
       </tr>
   </tbody>

export default {
    data: function() {
        return {
            selectedLandlords: []
        }
    },
    methods: {
        makePrimaryLandlord: function(landlord) {
            this.selectedLandlords = this.selectedLandlords.map(item => {
                item.is_primary = false; return item});
            }
        }
    }
}