对于el-autocomplete组件使用中字符串和数字导致的报错

fury_123

于 2024-04-02 16:23:13 发布

阅读量317

点赞数 5

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/kuang_nu/article/details/137274721

版权

问:

<!-- 专题 ?-->
        <el-col :span="8">
          <el-form-item
            prop="topicId"
            label="专题"
            :rules="{
            required: true, message: '专题不能为空', trigger: 'change'
          }"
          >
            <el-autocomplete
              v-model="addDataForm.topicId"
              :fetch-suggestions="querySearch"
              placeholder="请输入专题id"
              :trigger-on-focus="false"
              value-key="id"
              ></el-autocomplete>
              <!-- @select="handleSelect" -->
          </el-form-item>
        </el-col>

addDataForm:{
    topicId:"",
}

querySearch(id, cb) {
        console.log(cb,'cb')
          ajaxMethods(
              "get",
              `${configuration}/cxTopic/getById/${id}`,
              {},
              (res) => {
                  if (res.code === 0) {
                    const data = res.data;
                    // 将数据格式化为 el-autocomplete 所需的格式
                    const formattedData = { title: data.title, id: data.id };
                    cb([formattedData]); // 将格式化后的数据传递给回调函数
                  } else {
                    // 处理错误情况
                    console.error('请求失败:', res.msg);
                  }
              }
          );
      },

分析代码,为什么会导致报错:
[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, got Number.

found in

---> <ElAutocomplete> at packages/autocomplete/src/autocomplete.vue
       <ElFormItem> at packages/form/src/form-item.vue
         <ElCol>
           <ElRow>
             <ElForm> at packages/form/src/form.vue
               <ElDialog> at packages/dialog/src/component.vue
                 <Root>

回答: