vue 动态生成 el-checkbox-group 遇到的v-model绑定问题及解决方法

在vue中动态生成 el-checkbox-group 时，可以使用 v-model 进行数据的双向绑定。但有时候会遇到绑定不成功的问题，这时可能是因为 v-model 绑定的值与动态生成的选项的 value 值不匹配。

解决方法是在动态生成选项时，给每个选项都设置一个唯一的 value 值，这样就可以确保 v-model 绑定的值与选项的值匹配。以下是一个示例代码：

<template>
  <el-checkbox-group v-model="checkedFruits">
    <el-checkbox v-for="fruit in fruits" :key="fruit.value" :label="fruit.value">{{ fruit.label }}</el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        { label: '苹果', value: 'apple' },
        { label: '香蕉', value: 'banana' },
        { label: '橙子', value: 'orange' },
      ],
      checkedFruits: [], // 绑定的值
    };
  },
  mounted() {
    // 动态生成选项
    this.fruits.push({ label: '芒果', value: 'mango' });
  },
};
</script>

在上面的示例代码中，每个选项都有一个唯一的 value 值，这样就可以确保 v-model 绑定的值与选项的值匹配，从而实现数据的双向绑定。