Vue复选框没有随着数据变化而更新

我在Vue中的数据在更新用户界面时遇到了问题,但似乎只有复选框有这个问题。

我试图一次只允许选中一个复选框,因此我将所有的复选框在点击其中一个复选框时设置为假。然而,这在数据中是有效的,但在复选框中却不能正确地呈现。

HTML.Vue

<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});
            }
        }
    }
}

只有复选框出现了问题。如果我改变名称,或者用一个过滤的数组将它们全部设置为一个特定的值,它们就会改变,但是复选框的数据变化并没有反映在用户界面中,然而Vue中的数据是正确的。

解决方案:

来自 官方文件

  • 文本和textarea元素使用 价值 财产和 输入 事件。
  • 复选框和单选按钮使用 检查 财产和 变化 事件。
  • 选择字段使用 价值 作为道具和 变化 作为一个事件。

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何在服务器上点击按钮运行代码?

2022-9-13 13:45:34

未分类

优先处理Kafka主题

2022-9-13 13:56:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索