当前位置:   article > 正文

解决el-select、el-input 无法显示选中内容、输入内容的问题_el-select v-model 获取不到输入的值

el-select v-model 获取不到输入的值

问题描述:

首次修改后正常,但是第二次或者多次修改后,el-select不显示选中的项目。在input框内不显示输入的内容。

关键代码(表单的某两项)

绑定的值为form表单绑定值aiForm下的值extConfig对象下面的值

  1. <el-form-item label="更多配置:">
  2. <el-select v-model="aiForm.extConfig.defectSizeType"
  3. placeholder="请选择defectSizeType"
  4. style="width:100%;margin-bottom:10px"
  5. clearable
  6. filterable
  7. multiple
  8. collapse-tags>
  9. <el-option v-for="item in sizeTypeOptions"
  10. :key="item.value"
  11. :label="item.label "
  12. :value="item.value">
  13. </el-option>
  14. </el-select>
  15. <el-input v-model="aiForm.extConfig.defectLength"
  16. placeholder="请输入defectLength"
  17. type='number'
  18. style="width:100%"></el-input>
  19. </el-form-item>
  20. </el-form>
  1. var vm = new Vue({
  2. el:'#rrapp',
  3. data:{
  4. aiForm:{
  5. extConfig: {
  6. extConfig: 'extConfig',
  7. defectSizeType: [],
  8. defectLength: ''
  9. }
  10. },
  11. sizeTypeOptions: [{
  12. value: 'A',
  13. label: 'A'
  14. }, {
  15. value: 'C',
  16. label: 'C'
  17. }, {
  18. value: 'EE',
  19. label: 'EE'
  20. }, {
  21. value: 'G',
  22. label: 'G'
  23. }],
  24. })

el-select和el-input选择器,当绑定值为嵌套比较深的值时,容易出现无法显示选中内容的问题。但是只是在页面上没有选中的UI,实际上选中的内容是绑定上的。

官网说明:

解决方式:

使用自带组件实例$forceUpdate()

解决代码:

  1. //只用在 el-select、el-input上绑定分别绑定 @change、@input事件 使其触发forceUpdate
  2. <el-form-item label="更多配置:">
  3. <el-select v-model="aiForm.extConfig.defectSizeType"
  4. placeholder="请选择defectSizeType"
  5. style="width:100%;margin-bottom:10px"
  6. clearable
  7. filterable
  8. multiple
  9. collapse-tags
  10. @change="$forceUpdate()">
  11. <el-option v-for="item in sizeTypeOptions"
  12. :key="item.value"
  13. :label="item.label "
  14. :value="item.value">
  15. </el-option>
  16. </el-select>
  17. <el-input v-model="aiForm.extConfig.defectLength"
  18. placeholder="请输入defectLength"
  19. type='number'
  20. style="width:100%"
  21. @input="$forceUpdate()"></el-input>
  22. </el-form-item>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/577886
推荐阅读
相关标签
  

闽ICP备14008679号