Как я могу "динамически" передать геттер veux как опору моему дочернему компоненту?

Question

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

Parent.vue (см. строку: 2)

<v-tab-item v-for="item in tabItems" :key="item.list">
  <searchCard :items="item.list">
    <template v-slot:content="prop">
      <v-card-title class="text-capitalize">{{ prop.item.name }}</v-card-title>
      <v-card-text>
        <p>Rate:&nbsp;{{ prop.item.rate }}/{{ prop.item.unit }}</p>
        <p>Quantity:&nbsp;{{ prop.item.quantity }}</p>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <plusMinusGroup>
          <p slot="value">{{ prop.item.quantity || 0 }}</p>
        </plusMinusGroup>
      </v-card-actions>
    </template>
  </searchCard>
</v-tab-item>

Это то, что мой tabItems массив выглядит как и сопоставленные геттеры

tabItems: [
  { list: 'prodList', cardHeight: 20 },
  { list: 'materialList', cardHeight: 20 },
  { list: 'itemList', cardHeight: 20 },
],

...mapGetters({
  prodList: 'products/productList',
  materialList: 'materials/materialList',
  itemList: 'items/itemList',
}),

Проблема в том, что значение перехватывается как строковый литерал (что имеет смысл), и я не могу заставить его работать.

Я пытался заменить { list: "prodList", cardHeight: 20 }, с участием { list: this.prodList, cardHeight: 20 }, но это не помогает

Кроме того, поскольку мой Vuex разделен на различные модули, я не могу использовать предоставленную строку для получения метода получения внутри дочернего модуля.

Answer 1

Основная трудность здесь заключается в том, что нет $computed эквивалентно $data, Если бы это было так, это было бы легко.

Одним из вариантов является поставить явный this в шаблоне:

<searchCard :items="this[item.list]">

Если вы используете линтер, он, вероятно, пожалуется на это.

Экземпляр имеет ссылку на себя в _self свойство. Подчеркивание указывает на то, что оно закрытое, поэтому мы не должны его использовать. Теоретически вы можете создать свой собственный псевдоним:

data () {
  return {
    self: this
  }
}

тогда:

<searchCard :items="self[item.list]">

Кажется немного хакерским.

Есть приемы, использующие методы получения свойств, которые будут работать, но я думаю, что это только усложнит ситуацию. напр., размещение геттера на каждом элементе вкладки, который проходит через соответствующий список.

Самый простой способ, вероятно, заключается в предоставлении метода:

methods: {
  getList (listName) {
    return this[listName]
  }
}

с участием:

<searchCard :items="getList(item.list)">

Мне это кажется наименее вероятным, чтобы вызвать путаницу у будущих разработчиков кода.