https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
js中data：items [
nameUSA
value美国
radioType：radio_default
},
nameCHN
value中国
checkedtrue
radioType：radio_default
},
nameBRA
value巴西
radioType：radio_default
},
nameJPN
value日本
radioType：radio_default
},
nameENG
value英国
radioType：radio_default
},
nameFRA
value法国
radioType：radio_default
},
]
radioChange方法主要更新选中的状态
radioChange: function (e) {
let newItems = JSON.parse(JSON.stringify(this.data.items));
newItems.map(item => {
if (item.name == e.detail.value) {
item.checked = true;
} else {
item.checked = false;
}
})
this.setData({
items: newItems
})
},
submit方法中根据选择结果更新class中的样式
submit() {
let newItems = JSON.parse(JSON.stringify(this.data.items));
let isOk = true;
newItems.map(item => {
if (item.checked && item.value !== "中国") {
item.radioType = "radio_error";
isOk = false;
}
if (item.value == "中国") {
item.radioType = "radio_success";
}
});
if (!isOk) {
console.log("newItems", newItems);
this.setData({
items: newItems
});
console.log(this.data.items)//这里输出的结果是正常更新的
}
}
}
页面中显示的结果class里面的{{item.radioType}}还是以前的 radio_default 而text标签里面已经更新成了相应的值 如中国选项 的 radio_success
<radio-group class="radio-group" bindchange="radioChange">
<radio class="radio {{item.radioType}}" wx:for="{{items}}" wx:key="index" value="{{item.name}}" checked="{{item.checked}}" disabled="{{showAnswer}}">
<text>{{item.value}} {{item.radioType}}</text>
</radio>
</radio-group>
请问如何才能同步更新呢？
小程序中class里面的写法与vue中有差异，小程序必须通过三元运算来判定返回什么class，如{{item.radioType==xx?'xx':'yy'}}