Vue.js + 防止加载时触发手表

Question

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

所以我使用了一个布尔标志，默认情况下为真，只有在输入更改时才设置为假输入 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则忽略更改。 watch 处理程序分别接收新值和旧值作为其第一个和第二个参数：

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

演示

Answer 2

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

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

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