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

合集 - 【uniApp+ESP32 arduino编程】(6)

1.【uniapp】举例解决uniapp无法注销回调函数，导致多次调用 + 举例EPS32-arduino 与uniapp间蓝牙JSON通信 BLE链接与通信过程2024-07-022.【uni-app】uni-icons 图标使用和通过文心一言解决icon不显示BUG2024-06-233.【uniapp】BLE及通信过程+举例EPS32-arduino 与uniapp间蓝牙JSON通信2024-06-204.【ESP32 Arduino】使用ArduinoJson 7.x库处理JSon数据2024-06-25

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

6.【ESP32 Arduino】RS485通信及MODBUS RTU通信实例2024-07-18

收起

 

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>