VUE element-ui组件中input和select组件的绑定的值偶尔异常的情况

element-ui组件中input和select组件是我们比较常用的两个组件
在使用的过程中偶尔会出现一个比较奇怪的现象,显示的值总是慢一拍,不是自己刚刚输入/选中的,上一次输入/选中的值

例如input在输入后,每次输入值后,显示的都是上一次的值:
键盘输入: a
此时input文本框中没有值显示
键盘再次输入: b
此时input文本框中显示:a
键盘再次输入: c
此时input文本框中显示:ab

select组件偶尔也会出现类似的情况
比如
select的下拉选项选择一个值:选项1
select框没有显示选中项
select的下拉选项再次选择一个值:选项2
select框显示的值为:选项1
select的下拉选项再次选择一个值:选项3
select框显示的值为:选项2

这样的情况发生大概率是因为input/select绑定的某一个对象下的一个属性,这个属性又没有在此对象中定义
html代码:

<div class="app-container">
    <el-input v-model="form.val" placeholder="请输入内容"></el-input>
    <el-select v-model="form.value" placeholder="请选择">
      <el-option label="选项1" value="1"></el-option>
      <el-option label="选项2" value="2"></el-option>
  </el-select>

js代码:

<script>
  export default {
    data() {
      return {
        form: {} // 这是一个空对象,没有定义属性
      }
    }
  }
</script>

解决这样的办法很简单,只需要把data定义的form中加上对应的属性就行

<script>
  export default {
    data() {
      return {
        form: {
        val: '',
        value: ''
        }
      }
    }
  }
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue使用element-uiInput组件实现模糊查询,你可以通过v-model绑定输入框的,并监听输入框的change事件,在事件处理函数调用接口进行查询操作。另外,你可以使用element-ui的Autocomplete组件来实现带有下拉提示的模糊查询效果。 示例代码如下: ```html <template> <div> <el-input v-model="keyword" @change="handleSearch" placeholder="请输入关键字"></el-input> <el-autocomplete v-model="selectedValue" :fetch-suggestions="querySearch" placeholder="请输入关键字" @select="handleSelect"> <template slot-scope="{ item }">{{ item }}</template> </el-autocomplete> </div> </template> <script> export default { data() { return { keyword: '', selectedValue: '', suggestions: [] }; }, methods: { handleSearch() { // 调用接口进行查询操作,将查询结果更新到suggestions数组 // 示例代码直接使用了一个固定的suggestions数组作为演示,请根据实际需求进行修改 this.suggestions = ['结果1', '结果2', '结果3']; }, querySearch(queryString, cb) { // 在这里可以根据输入的queryString调用接口获取匹配的结果,并通过cb回调函数返回给Autocomplete组件 // 示例代码直接使用了一个固定的suggestions数组作为演示,请根据实际需求进行修改 const results = queryString ? this.suggestions.filter(item => item.includes(queryString)) : this.suggestions; cb(results); }, handleSelect(item) { // 处理选某个下拉项的逻辑 console.log('选的项:', item); } } }; </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值