zoukankan      html  css  js  c++  java
  • 浅析Vue3使用reactive/toRefs+v-model导致响应式失效el-form表单无法输入的问题

    一、问题背景

      vue3使用el-form的时候,如下代码,会导致输入框无法输入,无法赋值,选择框无法选择

    <el-form ref="service" :model="service" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="service.name"></el-input>
        </el-form-item>
        ......
    </el-form>
    
    setup() {
      const state = reactive({
        service: {
          name: '**'
        }
      })
      return {
        ...toRefs(state)
      }
    }

      ref 组件实例与 ref() 声明响应式变量名重复就会导致响应式失效这样的问题,form的任何表单内容均无法输入,且会报错:Uncaught (in promise) TypeError: Cannot read property 'name' of undefined 等之类的问题

    二、问题原因及解决

      由于 ref 命名和 model 一样导致出现了这样的问题。原因就是 el-form 声明了ref="service",导致 state 中声明的 service 被覆盖,2者冲突了。

      修改名字(如ref="serviceForm" 或者 model="serviceInfo")即可解决问题。

  • 相关阅读:
    数组与方法
    数据类型
    认识Java(2)
    认识Java(1)
    面试题集锦
    00-python语言介绍
    06-python-生成器、循环器
    00-python-内置函数笔记
    04-python-闭包
    03-python-装饰器
  • 原文地址:https://www.cnblogs.com/goloving/p/15468363.html
Copyright © 2011-2022 走看看