Invalid prop: type check failed for prop "name". Expected String with value "17", got Number with va

布满荆棘的人生 2024-04-18 08:48 31阅读 0赞

1、错误描述

vue.runtime.esm.js:631 [Vue warn]: Invalid prop: type check failed for prop "name". Expected String with value "17", got Number with value 17.
    
    found in
    
    ---> <ElCheckbox> at packages/checkbox/src/checkbox.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
                     <Index> at src/views/org/index.vue
                       <AppMain> at src/layout/components/AppMain.vue
                         <Layout> at src/layout/index.vue
                           <App> at src/App.vue
                             <Root>
    warn @ vue.runtime.esm.js:631
    vue.runtime.esm.js:631 [Vue warn]: Invalid prop: type check failed for prop "name". Expected String with value "18", got Number with value 18.
    
    found in
    
    ---> <ElCheckbox> at packages/checkbox/src/checkbox.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
                     <Index> at src/views/org/index.vue
                       <AppMain> at src/layout/components/AppMain.vue
                         <Layout> at src/layout/index.vue
                           <App> at src/App.vue
                             <Root>

2、错误原因

由于el-checkbox中的属性name需要字符串类型，而后台传过来的是数字类型，导致类型不匹配，出现报错

<el-form ref="form" :model="form" label-position="left" style="margin-left:50px;">
      <el-form-item>
        <ul>
          <li v-for="(item,index) in form.target" :key="index">
           <el-checkbox :name="item.id">{
       { item.name }}</el-checkbox><el-button size="mini" style="margin-left:20px;" @click="removeItem(index)">移除</el-button>
          </li>
        </ul>
      </el-form-item>
    </el-form>

3、解决办法

编写一个过滤器，将数值类型转换成字符串

<el-form ref="form" :model="form" label-position="left" style="margin-left:50px;">
      <el-form-item>
        <ul>
          <li v-for="(item,index) in form.target" :key="index">
           <el-checkbox :name="item.id">{
       { item.name | numToStr }}</el-checkbox><el-button size="mini" style="margin-left:20px;" @click="removeItem(index)">移除</el-button>
          </li>
        </ul>
      </el-form-item>
    </el-form>

export function numToStr(num) {
      num = num.toString()
      return num
    }

Invalid prop: type check failed for prop "name". Expected String with value "17", got Number with va

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Invalid prop: type check failed for prop "round". Expected Boolean, got String with value "true".

相关 Invalid prop: type check failed for prop "name". Expected String with value "17", got Number with va

相关报错Vue warn]: Invalid prop: type check failed for prop “min“. Expected Number with value 1,

相关 vue报错：[Vue warn]: Invalid prop: type check failed for prop "value". Expected Number, got String....

相关 nvalid prop: type check failed for prop “index“. Expected String with value “5“ 解决办法！

相关 vue报错：Invalid prop: type check failed for prop “index“. Expected String with value

相关 Invalid prop: type check failed for prop "radius". Expected Number, got String.

相关 [Vue warn]: Invalid prop: type check failed for prop "action". Expected String with value "undefined

相关 Invalid prop: type check failed for prop “value“. Expected String, Number, got Array问题解觉及查找

相关 Invalid prop: type check failed for prop “orderId“. Expected Number with value 572, got String with