复选框列表不会在动态生成的复选框 v-models 数组中更新

Posted 2023-02-23

【中文标题】复选框列表不会在动态生成的复选框 v-models 数组中更新

【英文标题】：List of checkboxes wont update in dynamic generated array of checkboxes v-models

【发布时间】：2020-12-29 02:29:50

【问题描述】：

我有一个包含复选框列表的键-> 值对的数组。它们渲染得很好，但是当你点击它们时，什么都没有发生，除非我更改文本输入，然后这些复选框再次使用新值重新渲染（无论我之前点击过哪个）。

复选框：

<el-col :span="24">
   <el-form-item class="permission-item" :span="24" :key="perm.name" v-for="perm in permissions" :label="perm.name">
       <el-switch v-model="role_permissions[perm.name]" />
   </el-form-item>
</el-col>

如果我更新然后复选框更新的其他元素：

<el-col :span="8">
  <el-row>
    <el-col :span="24">
        <el-form-item label="Role Name" prop="name">
          <el-input v-model="role.name"/>
        </el-form-item>
    </el-col>
  </el-row>
</el-col>

组件：

export default 
    data() 
      return 
        role: this.role,
        permissions: [],
        role_permissions: 
      ;
    ,
    methods: 
      getRole: async function()
        //Inside axios ajax
        this.role = response.data.role;
      ,
      getPermissions: async function()
        //Inside axios ajax   
        this.permissions = response.data.permissions;          

        //Init the array with the values
        for(var i = 0; i < this.permissions.length; i++)
          this.role_permissions[this.permissions[i].name] = this.hasPerm(this.permissions[i].name);
                
      ,
      hasPerm(name)
        for(var i = 0; i < this.role.permissions.length; i++)
          if(name === this.role.permissions[i].name)
            return true;
          
        
        return false;
      
    ,
    mounted() 
      this.getRole();
      this.getPermissions();
    ,
  

谁能告诉我为什么会这样？

【参考方案1】：

在你的 switch 标签中同时使用 v-model 和 bind:value

【讨论】：

如果我删除 bind:value 它仍然有同样的问题

尝试将你在 switch 中使用的方法移动到计算值，你将重新计算值

你能举个例子吗？我在 switch 中没有使用任何方法。唯一相关的是加载具有初始值的数组时

对不起，我走错路了。你的对象没有反应，这就是原因。 Read about reactivity，并以正确的方式为您的对象设置初始值

【参考方案2】：

在查看反应性问题几天后，修复如下：

改了

role_permissions: 

到这里：

role_permissions: []

那么，为什么这不起作用的关键部分在于数组的初始化。这发生在 getPermissions() 中，这就是我所做的：

改变了这个：

for(var i = 0; i < this.permissions.length; i++)
   this.role_permissions[this.permissions[i].name] = this.hasPerm(this.permissions[i].name);
   

到这里：

for(var i = 0; i < this.permissions.length; i++)
   this.$set(this.role_permissions, this.permissions[i].name, this.hasPerm(this.permissions[i].name));

不要使用“=”，而是使用“$set”进行赋值。