问题描述: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>