Vue.js 当遇到单选按钮 选不中情况

javascript语言,Vue 2020-07-25

问题的出现:
当单选的模板也是数据配置时,出现数字的key 不能 正常渲染

如:
options 是这样的数据时,就想做三个选项,但这三个选项也是数据配置项,key为数字时不能正常渲染
options:{1:'二手市场', 2:'新闻页',3:'趣味中心'}

<el-radio
        v-for="(item,i) in options"
        v-model="formData[fd.prop]"
        :label="i"
        :key="i"
        :disabled="readonly">
    {{item}}
</el-radio>

出现情况分析
应该是数据类型不匹配
formData[*]打印出数据类型是number
那应该就是options在后续的处理中,已经把数据类型变了

解决办法
当判断 formData[*]为number时,强制性把 options 的key转化为number

<el-radio
        v-for="(item,i) in options"
        v-model="formData[fd.prop]"
        :label="(typeof formData[*] == 'number')?Number(i):i"
        :key="i"
        :disabled="readonly">
    {{item}}
</el-radio>

本文由 wenyi 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论