Блог

У меня есть родительский компонент с объектом данных config , как показано ниже:

 data() {
   return {
       config: {
            Groups: [
              {
                name: "A",
                Types: [
                  { mask: 1234, name: "Alice", type: 1},
                  { mask: 5678, name "Bob", type: 1},
                ]
              },
              {
                name: "B",
                Types: [
                  { mask: 9876, name: "Charlie", type: 2},
                  { mask: 5432, name "Drake", type: 2},
                ]
              }
            ],
        },
        Defaults: {
          dummyBoolean: false,
          dummyNumber: 1
        }
      }
   }
}
 

Есть также 2 дочерних компонента, для каждого из которых я хочу передать Types массив (внутри каждого элемента объекта Groups), если each_element.name == child component's name .

То, что я сделал до сих пор, — это вычисление функции для каждого из компонентов следующим образом (что крайне неэффективно):

       computed: {
        dataSender_A() {
          let array= []
          this.config.Groups.forEach( element => {
            if (element.name === "A") array = element.Types
          });
          return array
        },
        dataSender_B() {
          let array= []
          this.config.Groups.forEach( element => {
            if (element.name === "B") array = element.Types
          });
          return array
        },
      }
 

Я ищу лучшую альтернативу для этого (поскольку у меня может быть больше дочерних компонентов), и два подхода, которые я пробовал до сих пор, потерпели неудачу.

1. Наличие только одной computed функции, которая принимает имя компонента в качестве аргумента и может быть передана как <child-component-A :types="dataSender('A')" /> <child-component-B :types="dataSender('B')" /> (поскольку она выдает ошибку dataSender, это не функция)

       computed: {
        dataSender: function(groupName) {
          let array= []
          this.config.Groups.forEach( element => {
            if (element.name === groupName) array = element.Types
          });
          return array
        },
      }
 

2. Наличие вышеупомянутой функции methods и передача ее в качестве реквизита дочерним компонентам (поскольку она передает саму функцию, а не выводимый массив)

Я был бы признателен за любую помощь в этом.

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

  methods: {
        dataSender: function(groupName) {
          let array= []
          this.config.Groups.forEach( element => {
            if (element.name === groupName) array = element.Types
          });
          return array
        },
      }