Передача объекта от многих детей родителю в Vue. js - PullRequest
Новая
       82

Передача объекта от многих детей родителю в Vue. js

0 голосов
/ 13 марта 2020

У меня есть родительский и дочерний компоненты в приложении vue. js. Ребенок передает объект родителю в вызове emit. Иногда ребенок должен передать пустой объект родителю.

Родитель имеет несколько дочерних компонентов. Когда он получает emit от одного из дочерних элементов, содержащих пустой объект, он должен обновить свою переменную "f", чтобы потерять содержимое фильтра этого конкретного дочернего элемента, но при этом включить любое содержимое других дочерних элементов. Как я могу это сделать? Вот мой код, который в настоящее время стирает всю переменную "f", когда любой из потомков передает пустой объект newFilt обратно родителю. Если другие дочерние элементы отправили данные newFilt обратно родителю, эти данные нежелательно больше не присутствуют в родительской переменной «f».

дочерний компонент: 

   saveValues() {
      this.recalc();
      // yields something like { city: [ "Chicago", "Rockford" ] }
      let newFilt = null;
      if (this.selectedValues.length > 0) {
        newFilt = {
          [this.columnDef.column_name]: this.selectedValues
        };
      } else {
        newFilt = {};
      }
      this.$emit("filters-changed", newFilt);
    }

родительский компонент: 

methods: {
    onFiltersChanged(newFilter) {
      console.log("in onFiltersChanged... newFilter = " + newFilter);
      this.f = Object.assign(this.f, newFilter);
      console.log(
        "this.f after reassigning new filter: " + JSON.stringify(this.f)
      );
    },

1 Ответ

0 голосов
/ 13 марта 2020

Дочерние компоненты могут испускать какой-то идентификатор, который сообщит родительскому компоненту, откуда взялся источник:

Дочерний компонент: 

this.$emit("filters-changed", {name: 'name1', newFilt})

Родительский компонент: 

onFiltersChanged (payload) {
  let { name, newFilt } = payload 
  ...
}

Вы не показали нам достаточно кода, чтобы сделать более полезный пример, но вы поняли идею, просто используйте переменную name в onFiltersChanged для поиска / фильтрации объектов

...