element-ui的el-input组件使用v-model部署出现无法输入情况

博客讲述了在升级Vue2应用到Vue3后,遇到Element-UI的el-input组件无法输入的问题。错误信息表明问题与Vue3的更新有关,但实际原因是组件绑定方式的改变。作者提供了修正后的Vue3代码,并指出问题在于v-model的使用。解决方案是使用`ref`和`vue`的最新语法来正确绑定和更新输入值。
摘要由CSDN通过智能技术生成

问题描述:element-ui的el-input组件使用v-model部署出现无法输入的情况

报错:报错
解决方法: 将vue2 全部转成vue3 《 真把我坑惨了,搜了好多,说什么这是vue3.2版本的bug,网上那些也全是跟父子组件有关的解决方法,可是我根本就没用父子组件传值》必须记录!
html

<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <!-- 搜索与添加区域 -->
      <el-input placeholder="请输入内容" @clear="clearInput" @input="forceUpdate" v-model="worker" clearable @keyup.enter.native="getUserList">
        <template #append>
          <el-button @click="getUserList"
            ><el-icon><search /></el-icon>
          </el-button>
        </template>
      </el-input>
    </el-col>
  </el-row>
  <div class="mt-5 ml-3">
    {{ msg }}
  </div>
</template>

正确 vue3 js

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import request from '../../utils/request'
import { ref, onBeforeMount, onUpdated } from 'vue'
import { useRoute } from 'vue-router' //引入路由组件

const $route = useRoute()
const el = ref('')
const msg = ref('')
const worker = ref('')

const isInteger = obj => {
  return Math.floor(obj) === obj
}
const getUserList = () => {
  msg.value = '正在配置....'
  // 由于parseInt方法将字符串123qwe转换成数字123 ,不符合要求  因此做一下操作
  // 先判断是否为数字,再判断是否为整数
  var num = parseInt(worker.value)
  var isInt = num.toString() == worker.value ? isInteger(parseInt(worker.value)) : false
  // 判断是否为数字,且将数字字符串化后与原字符串相等
  if (isInt) {
    worker.value = parseInt(worker.value)
    console.log('存入formData中的数据:', el.value, worker.value)
    let form = new FormData()
    form.append('var', el.value)
    form.append('worker', worker.value)
    // // 打印显示出formdata中的数据
    // for (let [a, b] of form.entries()) {
    //   console.log(a, b, '--------------')
    // }
    request
      .post('/biaoti/mx_worker/', form, { 'Content-Type': 'multipart/form-data' })
      .then(res => {
        msg.value = res.data.msg
      })
      .catch(err => {
        msg.value = res.data.msg
        // ElMessage.error(err)
      })
  } else {
    // 如果参数不是数字,则清空输入框
    msg.value = ''
    worker.value = ''
    ElMessage.error('请输入整数!')
  }
}
const clearInput = () => {
  msg.value = ''
}

onBeforeMount(() => {
  console.log('得到参数的query参数', $route.query.el)
  el.value = $route.query.el
})
onUpdated(() => {
  console.log('得到参数的query参数', $route.query.el)
  el.value = $route.query.el
})
</script>

本地没错,部署报错 vue2 js

<script setup>
  import { Search } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  </script>
  <script>
  import request from '../../utils/request'
  export default {
    data() {
      return {
        // 传递过来的参数
        el: '',
        // 输入的数据
        worker: '',
        // 返回的数据
        msg: ''
      }
    },
    created() {
      console.log('得到参数的query参数', this.$route.query.el)
      this.el = this.$route.query.el
    },
    updated() {
      console.log('得到参数的query参数', this.$route.query.el)
      this.el = this.$route.query.el
    },
    methods: {
      //匹配数字 -- 整数
      isInteger(obj) {
        return Math.floor(obj) === obj
      },
      getUserList() {
        this.msg = '正在配置....'
        // 由于parseInt方法将字符串123qwe转换成数字123 ,不符合要求  因此做一下操作
        // 先判断是否为数字,再判断是否为整数
        var num = parseInt(this.worker)
        var isInt = num.toString() == this.worker ? this.isInteger(parseInt(this.worker)) : false
        // 判断是否为数字,且将数字字符串化后与原字符串相等
        if (isInt) {
          this.worker = parseInt(this.worker)
          // console.log('存入formData中的数据:', this.el, this.worker)
          let form = new FormData()
          form.append('var', this.el)
          form.append('worker', this.worker)
          // // 打印显示出formdata中的数据
          // for (let [a, b] of form.entries()) {
          //   console.log(a, b, '--------------')
          // }
          request
            .post('/biaoti/mx_worker/', form, { 'Content-Type': 'multipart/form-data' })
            .then(res => {
              this.msg = res.data.msg
            })
            .catch(err => {
              this.msg = res.data.msg
              // ElMessage.error(err)
            })
        } else {
          // 如果参数不是数字,则清空输入框
          this.msg = ''
          this.worker = ''
          ElMessage.error('请输入整数!')
        }
      },
      clearInput() {
        this.msg = ''
      },
      forceUpdate() {
        this.$forceUpdate()
      }
    }
  }
  </script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值