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是一個空字符串，正如您最初設置的那樣，該按鈕將被禁用。