建设网站要备案吗,佛山企业网站建设多少钱,凡科小程序登录,公司如何建站前言 下拉框对于开发来说再常见不过了#xff0c;也是界面设计中的常用组件#xff0c;在部分使用场景下#xff0c;我们需要做到下拉框可以选择的同时#xff0c;支持搜素和输入#xff0c;以 element 的下拉框组件为例#xff0c;当我们同时设置属性让其支持搜素和输入…前言 下拉框对于开发来说再常见不过了也是界面设计中的常用组件在部分使用场景下我们需要做到下拉框可以选择的同时支持搜素和输入以 element 的下拉框组件为例当我们同时设置属性让其支持搜素和输入时就会出现下图问题 通过上面的动图我们不难看出下拉框输入已经存在的值进行匹配是没有问题的点击提交控制台也将值打印了出来但当我们输入一个不存在的值时再次点击提交控制台并没有打印出来这是因为什么呢
分析原因
其主要的原因就是使用 vue 开发时在函数中改变了页面中的某个值在函数中查看是修改成功了但在页面中没有及时刷新改变后的值。 解决方案 this.$forceUpdate() this.Sforceupdate() 是 vue 中的一个 api它可以强制组件更新就是当组件的数据发生变化时它可以立即更新组件的视图而不需要等待下一次重新渲染。 this.$forceupdate() 函数有以下特点: 它可以强制组件更新在数据发生变化时立即更新组件的视图而不需要等待下一次重新渲染它可以避免组件重新渲染提升性能它可以避免在某些情况下出现不可预料的 bug它可以使组件在不同的环境中保持一致性。
此外this.$forceupdate() 函数也可以接受一个参数参数为 boolean 类型传入 true 则可以强制执行子组件的更新传入 false 时则只更新当前组件本身。 调整后 完整代码
templatediv classparentBoxel-select v-modelfoodModel placeholder请选择 clearable filterable blurselectBlur clearselectClearel-option v-foritem in options :keyitem.index :labelitem.label :valueitem.value/el-option/el-selectel-button typeprimary clicksubmitOn提交/el-button/div
/templatescript
export default {data() {return {options: [{value: 0,label: 黄金糕,},{value: 1,label: 双皮奶,},{value: 2,label: 蚵仔煎,},{value: 3,label: 龙须面,},{value: 4,label: 北京烤鸭,},],foodModel: ,};},methods: {selectBlur(e) {this.foodModel e.target.value;this.$forceUpdate(); // 强制更新},selectClear() {this.foodModel ;this.$forceUpdate(); // 强制更新},// 模拟提交submitOn() {console.log(this.foodModel);},},
};
/script
