如何通過下拉選擇操作道具價值

Question

我正在嘗試對prop值進行過濾，並且它會根據下拉選擇進行更改。

這是我到目前為止的內容：

template(v-for="field in tableFields")
   th(:id="field.name")

   select(@change="filterScope(scope)" v-model="selectedScope")
       option(v-for="scope in scopes" v-bind:value="scope" ) {{scope}}


template(v-for="(item) in tableData")
            row(
            :item="item"
            )

第一個模板用於表標題，第二個模板用於表行。

假設當前我的表顯示如下數據：

Name                  Age                  Gender
Andrew                 21                   Male
Dan                    21                   Male
Kate                   33                   Female

所有這些行的數據都在tableData變量中，該變量是一個prop ，父級定義該值。 我要實現的是啟用“年齡和性別”的下拉選擇。

例如，年齡下拉列表將具有選項21和33，如果我選擇21，則該表將顯示如下：

Name                  Age                  Gender
Andrew                 21                   Male
Dan                    21                   Male

到目前為止，我的代碼是這樣的，我不確定如何繼續：

 methods: {
     filterScope: function(scope) {
            var resultArray = []
            this.tableData.forEach(function(data){
                if (data.age === this.selectedScope) {
                    resultArray.push(data)
                }
            }, this);
            this.tableData = resultArray;
        }
 }

我得到的錯誤是：

避免直接更改prop，因為每當父組件重新渲染時，該值都會被覆蓋。 而是使用基於屬性值的數據或計算屬性。 變異的道具：“ tableData”

由於某種原因，這將無法正常工作，並且數據未與來自Vue的警告一起正確過濾。 如何正確過濾tableData ？

Answer 1

您可以避免使用computed屬性來改變道具：

template(v-for="(item) in filteredData")
            row(
            :item="item"
            )

並在javascript代碼中

computed: {
  filteredData () {
    return this.tableData.filter((data) => data.age === this.selectedScope);
  }
}