el-select使用了multiple查看详情不能正常回显数据以及点击报错？

Question

   <el-col :span="24">
      <el-form-item label="公司部门" prop="extra">
        <el-select
          v-model="ruleForm.extra"
          :multiple="true"
          filterable
          style="width: 100%"
          default-first-option
          placeholder="请选择公司部门"
          @change="handleselectchange"
        >
          <el-option
            v-for="dict in CorporateWelfare"
            :key="dict.dictValue"
            :label="dict.dictName"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-col>

data的定义
    ruleForm: {
        extra: [],
    }
datall的接口返回详情数据
    async fetchData() {
      const route = this.$route
      if (route.query.id) {
        const { data } = await getRecruitDetail(route.query.id)
        this.ruleForm = data
        this.ruleForm.cityCode = ''
        this.ruleForm.area = ""
      }
    },

现在的问题在上面的结构里没有回显数据出来，返回的数据都能实出来了，唯独这个ruleForm.extra没有生效，接口getRecruitDetail回来的数据是string字符串extra: "技术部、推广部、市场部"这样的字段回来，现在详情页选择input框会报value.push is not a function 大佬们如何解决这个问题呢 想要的效果是 查看详情页正常回显 getRecruitDetail的字段以及点击选择下拉框的值

el-select使用了multiple查看详情不能正常回显数据以及点击报错？

Answer 1

你在【datall的接口返回详情数据】这块，已经将ruleForm给重新赋值了，此时的ruleForm.extra和el-select上绑定的ruleForm.extra不是同一个值