时间戳

首页 > 解决方案 > 如果元素是动态的，如何设置 v-model？

vue.js - 如果元素是动态的，如何设置 v-model？

问题描述

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

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

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

标签： vue.jsvuejs2

解决方案

如果您有组件 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
  });
 }
}

推荐阅读