Question

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

ZStack {
  Image(systemName: "larger-button-image")
    .opacity(0.0)
    Image(systemName: "smaller-button-image")  
}

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

Answer 1

如果您有组件A 获取的原始数据，则组件A 会克隆一些数据并将其注入左侧的字段中，然后确保左侧的字段数据面（克隆的面）绑定到其他X模型。要以编程方式更新v模型，请按照以下说明更新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
  });
 }
}

如果元素是动态的，如何设置v模型？

1 个答案: