如果元素是动态的，如何设置 v-model？答案

【问题标题】：How to set v-model if the elements are dynamic?如果元素是动态的，如何设置 v-model？
【发布时间】：2019-12-02 01:39:53
【问题描述】：

我有一个组件 A，它使用 slot 和 slot 属性作为许多组件的包装器，它看起来像这样

<component-A :some-prop="foo">
     <component-B slot-scope="slotProps"></component-B>
</component-A>

包装在组件中的所有动态组件-A 从单个对象获取数据，它具有所有键和值。组件 A 执行此功能，它将组件克隆到右侧并更改所有输入字段（文本，选择框）在左侧标记（收音机，复选框除外），我用自定义js进行了克隆，在我替换dom树中的元素类型后，需要设置收音机和复选框的v-model，是否可以?有没有办法以编程方式设置 v-model ？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

如果您有组件A获取的原始数据，则组件A克隆一些数据并将它们注入左侧的字段中，然后确保您的字段数据在左侧侧（克隆的）绑定到不同的 X 模型。要以编程方式更新 v-model，就是 更新 X 模型，如下所示：

组件：

<div >
  <li v-for="color in colors">
    <checkbox :checked="color.checked" > {{color.name}}
    </li>
  </li>
</div>
...
data: { return {
                  colors: [{name: 'red', checked: true},
                           {name: 'blue', checked: true},
                           {name: 'black', checked: false}]
               }
       }
....
methods: {
check_all_colors(){
  // example to update model that reflects on checkbox fields
  colors.forEach(function(element){
    element.checked = true
  });
 }
}

【讨论】：