Как манипулировать значением проп с выпадающим выбором - PullRequest
Новая
       32

Как манипулировать значением проп с выпадающим выбором

0 голосов
/ 29 ноября 2018

Я пытаюсь выполнить фильтрацию по значению проп, и оно изменяется в зависимости от выпадающего списка.

Вот что у меня есть: 

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

Ошибка, которую я получаю:

Старайтесь не менять объект напрямую, так как значение будет перезаписываться всякий раз, когда родительский компонент перезагружается.оказывает.Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита.Подставка изменена: "tableData"

По какой-то причине это не сработает, и данные неправильно фильтруются вместе с этим предупреждением от Vue.Как правильно отфильтровать tableData?

1 Ответ

0 голосов
/ 29 ноября 2018

Вы можете избежать мутации реквизита, используя свойство computed: 

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

и в коде javascript 

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