Vue.js+防止加载时监视触发器

Question

我想默认禁用按钮，只在输入值更改时启用它。

所以我使用了一个布尔标志，默认情况下为true，只有当输入发生变化时才会设置为false输入v-model绑定到Object属性。

问题是，当页面第一次加载时，它会触发watch属性，布尔值设置为false。因此该按钮从未被禁用。如何使手表只在值更改时触发？

以下是代码-

class GridFilters
{
constructor(grid)
{
this.grid = grid;
this.filterName = '';
this.buttonflag=true;
this.filterError=false;
}
}
export default {
data() {
return {
gridFilter : {};
};
},
created () {
this.gridFilter = new GridFilters(this); 
},
watch
{
'gridFilter.filterName': function ()
{
this.gridFilter.buttonflag= false;
},
}
};

html

<input placeholder="Enter a name" v-model="gridFilter.filterName" ref="filterName" @keydown="gridFilter.filterError=false" />
<button @click="save()" v-bind:disabled="gridFilter.buttonflag?true:false">Save Filter</button>

Answer 1

一种解决方案是，如果以前的值是undefined，则忽略更改。手表处理程序分别接收新值和旧值作为其第一个和第二个参数：

export default {
watch: {
'gridFilter.filterName': function (newVal, oldVal) {
if (oldVal === undefined) {
return
}
this.gridFilter.buttonflag = false
},
},
}

演示1

或者，当gridFilter.filterName的新值为空时，可以通过将gridFilter.buttonflag设置为true来改善UX。这样，如果用户决定清除输入，按钮将再次被禁用：

export default {
watch: {
'gridFilter.filterName': function (newVal) {
this.gridFilter.buttonflag = !newVal
},
},
}

演示2

Answer 2

我想你根本不需要那个观察者。您可以直接在按钮上使用gridFilter.filterName的值，如：

<button … :disabled=“gridFilter.filterName === ‘’”>

因此，如果filterName是一个空字符串，正如您最初设置的那样，该按钮将被禁用。