Vue框架中的数据双向绑定让使用者进行数据操作的时候更加方便、直观。但是在某些业务场景下双向绑定会给我们带来一些难题。如下:
用户在填写表单时点击树形控件使树形控件的值填写到输入框中。在此场景下,用户在输入框中输入的内容不应该被收集到表单数据中。如果使用双向绑定,那么会出现数据收集错误的可能。因此这里的业务逻辑应该为:组件实例的数据可以改变输入框的value值,而输入框的value值不能影响数据。具体实现代码如下:
将v-model改为:value
即将输入框的value值与组件实例的数据绑定,由于没有监听输入框的输入事件,用户的输入操作无效。避免误改数据。
若要实现输入框value值不受组件实例数据影响,而输入框的value值可以改变数据则只需要监听输入框监听事件使用处理函数进行操作即可。