Vue中使用this.$forceUpdate解决el-date-picker点击不显示问题

 利用v-model绑定Date在赋值后,点击选择日期页面不显示。

<el-date-picker v-model="Date"  value-format="yyyy-MM-dd" >
</el-date-picker>

<script>
this.Date = this.getDate();
</script>

 实际上是赋值的 界面上并不渲染的问题,例如在data中有一个msg的变量,你修改它,那么在页面上,msg的内容就会自动发生变化。但是如果对于一个复杂的对象,例如一个对象数组,你直接去给数组上某一个元素增加属性,或者直接把数组的length变成0,vue就无法知道发生了改变。

this.$set可解决这个问题 ,我们要说的 this.$forceUpdate()  对比较方便,推荐使用。 

解决方法:添加 @input="input()"

<el-date-picker v-model="Date"  value-format="yyyy-MM-dd" @input="input()" >
</el-date-picker>

input() {
      this.$forceUpdate();
},

猜你喜欢

转载自blog.csdn.net/Coludidi/article/details/126606005