我有一个组件A,它使用slot和slot属性为许多组件充当包装器,看起来像这样
ZStack {
Image(systemName: "larger-button-image")
.opacity(0.0)
Image(systemName: "smaller-button-image")
}
包裹在组件A中的所有动态组件都从单个对象获取数据,它具有所有键和值。组件A完成此功能,将组件克隆到右侧并更改所有输入字段(文本,选择框)在左侧进行标记(单选框,复选框除外),我使用自定义js进行了克隆,在替换dom树中的元素类型后,需要将单选框和复选框设置为v-model ?有什么办法以编程方式设置v模型?
答案 0 :(得分:0)
如果您有组件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
});
}
}