vue避免双向数据绑定方法

Vue双向绑定的特性虽然带来了许多便利之处,但有时却不希望进行双向绑定,比如遇到需要保留初始值的情况,vue的绑定会对原数据进行修改,进而让恢复初始值变得困难。一般的解决方案是在data()函数中复制一份,需要恢复初始值时直接从备份中取。本文介绍另一种解决方案。

<tr v-for="item in list" :key="item.id">
  <td>
    <input :ref="'input_'+item.id" v-once :data-time="item.time" v-model="item.time" />
  </td>
  <td>
    <button @click="edit(item,'input_'+item.id)">编辑</button>
  </td>
</tr>

如代码所示,我们需要保留每个input的初始值,方法如下,增加一个data-time属性,和input绑定同一个变量,默认情况下input内容改变后,data-time的值也会发生变化,但在使用v-once之后,data-time属性只会被渲染一次,不会再发生变化,这样就实现了我们的目的。然后介绍如何恢复,在edit方法中,将input的ref名称作为参数传入,然后通过this.$refs[refName]获取到input的引用,值得注意的是,这时获取的ref是一个数组,因为在vue2中,如果ref是在v-for中定义的,通过ref名称获取到的都是一个数组。

jtZqat.png

对于普通文本类型的输入框,直接使用item.time = this.$refs[inputRef][0].dataset.time就可以恢复初始值,但对于特殊类型,如type="datetime-local",除了上面的步骤以外,还必须对input的value属性进行赋值才会在页面中显示,即

item.time = this.$refs[inputRef][0].dataset.time
this.$refs[inputRef][0].value = this.$refs[inputRef][0].dataset.time
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。