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

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

报错:element-ui的el-input组件使用v-model部署出现无法输入情况_第1张图片
解决方法: 将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>

你可能感兴趣的:(ui,vue.js,javascript)