动态通过遍历数组动态改变class中的值,class中的值无法同步更新,但非class中的可以同步
发布于 5 年前 作者 yongyan 14920 次浏览 来自 问答

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>
请问如何才能同步更新呢?
回到顶部