Vue编辑页如何根据接口返回值预设表单复选框的选中状态

问题原因 #

你遇到的问题是两个点导致的：

• Vue 多复选框组的 v-model 要求绑定数组类型，会自动将选中项的 value 存入/移出数组，以此判断单个复选框是否选中
• 你当前接口返回的 crew_positions 是逗号分隔的字符串，直接绑定的话 Vue 会将其转为布尔值判断，非空就为 true、空就为 false，才会出现所有复选框全选/全不选的情况

解决步骤 #

1. 接口数据预处理：拿到返回结果后，先把 crew_positions 字符串拆分为数组
2. 提交数据前转换：如果后端要求接收字符串格式，提交前再把数组转回逗号分隔的字符串即可

代码修改示例 #

接口请求部分新增字段处理逻辑

const [actors, returnedListing] = await Promise.all([
  $axios.$get(`/api/v1/actors/`, {
    params: {
      user: body
    }
  }),
  $axios.$get(`/api/v1/listings/`, {
    params: {
      random_public_id: params.id
    }
  })
])

// 新增：把crew_positions字符串转为数组
if (returnedListing.length && returnedListing[0].crew_positions) {
  returnedListing[0].crew_positions = returnedListing[0].crew_positions.split(', ')
}

return { actors, returnedListing };

表单代码无需修改

你原本的复选框代码不用动，Vue 会自动匹配复选框的 value 是否在数组内，自动设置选中状态。

提交前转回字符串（按需添加）

如果后端接收的还是逗号分隔的字符串格式，提交前做一次转换即可：

// 提交前处理数据
const postData = {
  ...returnedListing[0],
  crew_positions: returnedListing[0].crew_positions.join(', ')
}
// 再把postData传给提交接口

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