【uniapp】使用举例 radio控件与data()内数据 响应式双向数据绑定

 

page.vue

<template>
    <checkbox-group @change="checkboxChange">
        <label class="flex-container" v-for="item in items" :key="item.value" style="align-items: center;">
            <view style="display:flex; text-align: left;flex:5">{{ item.name }}</view>
            <view style="display:flex; text-align: left;flex:5">
                <checkbox :value="item.value" :checked="checkedItems[item.value]" />
            </view>
        </label>
    </checkbox-group>
</template>

<script>
    export default {
        data() {
            return {
                items: [
                    // ... 你的items数据
                    {
                        name: '计划1',
                        value: 'effectivity_0'
                    },
                    {
                        name: '计划2',
                        value: 'effectivity_1'
                    },
                    {
                        name: '计划3',
                        value: 'effectivity_2'
                    },
                    {
                        name: '计划4',
                        value: 'effectivity_3'
                    },
                ],
                // 使用一个对象来跟踪每个item的选中状态  
                checkedItems: {
                    effectivity_0: true,
                    effectivity_1: true,
                    effectivity_2: true,
                    effectivity_3: true,
                }
            };
        },
        methods: {
            checkboxChange(e) {
                // 假设e.detail.value是一个包含选中值的数组  
                const values = e.detail.value;
                // 更新checkedItems对象以反映新的选中状态  
                this.items.forEach(item => {
                    this.$set(this.checkedItems, item.value, values.includes(item.value));
                });
                console.log(this.checkedItems)
                console.log(this.items)
            }
        }
    };
</script>