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

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
}