Vue.js编辑表单中复选框checked属性不生效问题求助

我明白你正在开发一个带多选复选框的编辑表单，需要从后端拉取选项数据，再绑定已选中的状态。先把你没写完的代码补全成完整的可运行示例，再给你拆解关键要点：

完整代码示例 #

<template>
  <div class="row">
    <!-- 循环渲染权限选项 -->
    <div 
      v-for="permiso in permisos" 
      :key="permiso.id" 
      class="col-md-5 col-12 col-sm-5"
    >
      <label :for="permiso.id" class="form-check-label">
        <input 
          type="checkbox" 
          :value="permiso.id" 
          class="form-check-input" 
          :id="permiso.id" 
          v-model="selected"
        >
        {{ permiso.name }} <!-- 显示权限名称，根据你的实际字段调整 -->
      </label>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      permisos: [], // 存储从后端获取的权限列表
      selected: []  // 存储已选中的权限ID数组
    };
  },
  created() {
    // 组件创建时发起AJAX请求获取权限数据
    this.fetchPermisos();
    // 如果是编辑场景，这里可以从后端拉取已选中的ID，赋值给selected
    // this.selected = [1, 3, 5]; // 示例：默认选中ID为1、3、5的权限
  },
  methods: {
    async fetchPermisos() {
      try {
        const response = await axios.get('/api/permisos'); // 替换成你的后端接口
        this.permisos = response.data;
      } catch (error) {
        console.error('获取权限数据失败:', error);
      }
    }
  }
};
</script>

关键要点拆解 #

• AJAX数据加载：在created钩子中调用fetchPermisos方法，用axios请求后端接口，把返回的数据赋值给permisos数组。记得处理请求失败的异常情况，避免页面报错。
• v-for渲染注意事项：必须给循环项绑定:key="permiso.id"，这是Vue的性能优化要求，也能避免渲染时的DOM混乱。
• 复选框绑定逻辑：
  • 用:value="permiso.id"指定每个复选框的选中值（这里存的是权限ID，你也可以换成整个permiso对象）
  • v-model="selected"会自动同步选中状态：选中时把对应ID加入selected数组，取消选中时移除
• 编辑场景适配：如果是编辑已有数据的表单，记得在获取权限数据后，把后端返回的已选中ID数组赋值给selected，这样页面加载时就能自动勾选对应选项。

如果还有具体的问题（比如选中状态不生效、数据加载慢导致的渲染问题），可以再补充细节哦！

内容的提问来源于stack exchange，提问作者DarkFenix