vue 根据后台返回数据动态展示复选框是否勾选?

Question

本人VUE新手一枚，使用的过程中遇到个问题，具体代码如下:
后台返回数据我循环遍历，怎么对应展示勾选呢？求解答:

<el-form-item label="方式" >
<el-checkbox-group v-model="form.dfalut == this.form.dfalut>
<el-checkbox v-for ="item2 in modelData" :label="item2" :value="item2">{{item2.label}}
</el-checkbox>
</el-checkbox-group>
</el-form-item >

Answer 1

去看下官网文档。https://element.eleme.cn/#/zh...

<template>
  <!-- `checked` 为 true 或 false -->
  <el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
  export default {
    data() {
      return {
        checked: true
      };
    }
  };
</script>

再结合判断条件，判断哪些要☑️，即哪些checked=true

Answer 2

数据双向绑定呀

// 这样就勾选了 1 和 2
<template>
  <el-form-item label="方式" >
    <el-checkbox-group v-model="checkboxValue">
      <el-checkbox v-for ="item2 in modelData" :label="item2" :value="item2">{{item2.label}}</el-checkbox>
    </el-checkbox-group>
  </el-form-item >
</template>
<script setup>
import { ref } from 'vue'
const checkboxValue = ref(['1', '2'])
const modelData = ['1', '2', '3']
</script>

vue 是数据驱动的，数据响应之后界面上的数据会自动更新

Answer 3

官网也有例子吧，https://element.eleme.cn/#/zh...

<el-checkbox-group 
    v-model="checkedCities">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>