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

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

1 个答案: