Vue：過濾用於搜索的對象數組

Question

我有一個有三個對象的數組，每個對象都有直鍵值對。

 // Search Input
 <div class="dv-header-search">
    <input type="text" class="dv-header-input"
      placeholder="Search"
      v-model="query.search_input">
  </div>

//Table row
<tr v-for="row in filteredRow">
    <td v-for="(value, key) in row">{{value}}</td>
</tr>

data() {
  return {
    model: {},
    columns: {},
    query: {
      search_input: ''
    },
  }
},

// Setting model after API call
.then(function(response) {
    Vue.set(vm.$data, 'model', response.data.model)
})

computed: {
  filteredRow: function(){
    return this.model.data.filter((row) => {
      return row;
    });
  }
}

它給了我以下例外：

TypeError：無法讀取未定義的屬性“過濾器”

我在這里失蹤了什么。

Answer 1

您可以在data方法中將model定義為空對象。

即使您稍后設置model的值，您的filteredRow方法也會在組件呈現模板時觸發，這意味着this.model.data將無法undefined this.model.data 。

最簡單的解決將是給model.data在初始值data的方法：

data() {
  return {
    model: { data: [] },
    columns: {},
    query: {
      search_input: ''
    },
  }
},