vue.js - Vue复选框未随数据更改而更新
问题描述
在 Vue 更新 UI 时我的数据出现问题,但似乎只有复选框有这个问题。
我试图一次只允许选中一个复选框,因此我在单击其中一个复选框时将所有复选框设置为 false。但是,这在数据中有效,但在复选框中未正确呈现。
HTML:
<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>
Vue代码:
export default {
data: function() {
return {
selectedLandlords: []
}
},
methods: {
makePrimaryLandlord: function(landlord) {
this.selectedLandlords = this.selectedLandlords.map(item => {
item.is_primary = false; return item});
}
}
}
}
只有复选框似乎有问题。如果我更改名称或带有过滤数组的文本值,将它们全部设置为特定值,它们会更改,但复选框数据更改不会反映在 UI 中,但是 Vue 中的数据是正确的。
解决方案
来自官方文档
- text 和 textarea 元素使用value属性和输入事件;
- 复选框和单选按钮使用选中属性和更改事件;
- 选择字段将值用作道具并将更改用作事件。
推荐阅读
- html - 无法在 Django 1.9 中加载 style.css
- angularjs - 通过 ASP.NET 样板中的 cookie 进行本地化
- git - 将更改发布到 packagegist 的正确方法?
- ios - Swift 从核心数据中获取图像到表视图
- python - 我在从 python 脚本进行 api 调用时生成了输出。我只需要该输出中的特定项目
- php - 在 Magento 2.2 上添加额外产品属性的正确方法
- azure - 是否有可能使用 Microsoft Azure Bot Services 创建 Java 聊天机器人?
- excel-formula - 如何通过列传播公式
- python - 在熊猫中如何基于相同的ID遍历两个数据帧
- html - 基于类而不是 id 连接到链接的锚标记