iview Select中v-for Option后，选择的值，不能绑定

最新推荐文章于 2023-09-12 20:59:55 发布

zbgahj1120

最新推荐文章于 2023-09-12 20:59:55 发布

阅读量5.3k

点赞数

本文链接：https://blog.csdn.net/weixin_41870520/article/details/82592307

版权

本文介绍了解决在使用Vue框架时遇到的kafkaTp绑定为空的问题，包括类型不匹配导致的选择项无法正常绑定及Select组件label-in-value属性引起的绑定失败两个常见情况，并给出了具体的解决办法。

摘要由CSDN通过智能技术生成

第一种情况则是因为类型造成的

<FormItem label="kafkaTp" prop="kafkaTp" class="kafka-form-select">
   <Select class="kafka-Select" v-model="formItem.kafkaTp">
      <Option v-for="(item, index) in formItem.formDataKafka.kafkaTp" :value="item" :key="index">
        {{ item }}
      </Option>
   </Select>
</FormItem>

验证kafkaTp的值，永远为空，绑定不上所选的值，解决方法如下：

kafkaTp: [

{ required: true, message: '卡夫卡来源名称（topic）不可以为空', trigger: 'blur' },

{ type: 'string' }

]
第二种情况若Select组件添加了label-in-value属性，其中value值为11-clear-time, 11为索引， clear-time为kafkaTp的值，但是选择的时候该项就是选择不上，因为kafkaTp的值应该改为clear_time, 不要用'-'符号