如何通过下拉选择操作道具价值

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);
  }
}