迭代VueJs中的数组

Question

我需要帮助迭代Vue中的数组。

数据结构 - 来自数据库 - 是一个蔬菜列表，每个案例根据其属和通用名称以及特定于该属的ID进行识别。

[{"genus":"Allium","name":"Garlic","id":19},
{"genus":"Allium","name":"Leek","id":19},
{"genus":"Allium","name":"Onions","id":19},
{"genus":"Allium","name":"Shallot","id":19},
{"genus":"Allium","name":"Spring onions","id":19},
{"genus":"Brassica","name":"Broccoli","id":20},
{"genus":"Brassica","name":"Cabbage","id":20},
{"genus":"Brassica","name":"Cauliflower","id":20},
{"genus":"Brassica","name":"Kale","id":20},
{"genus":"Cucurbit","name":"Bittermelon","id":13},
{"genus":"Cucurbit","name":"Cucumber","id":13},
{"genus":"Cucurbit","name":"Pumpkin","id":13},
{"genus":"Cucurbit","name":"Rockmelon","id":13},
{"genus":"Cucurbit","name":"Squash","id":13},
{"genus":"Cucurbit","name":"Zucchini","id":13},
{"genus":"Legume","name":"Beans","id":8},
{"genus":"Legume","name":"Broad beans","id":8},
{"genus":"Legume","name":"Peas","id":8}]

我在数据中识别出唯一的属性值（参见下面的“uniqueGenera”），然后遍历属于该属的所有蔬菜并显示其名称。

我有两个问题。

首先，一旦我确定了唯一的属名，我似乎无法访问与该属相关的ID（在“navigateTo（item.id）中）

<v-card
        v-for="(item,i) in uniqueGenera(genus)"
        :key="i"
        ripple
        @click="navigateTo(item.id)" class="hand"
    >
        <v-layout fill-height>
            <v-flex xs12 align-end flexbox>
                <p v-text="item"></p>
                <span
                    v-for="(card, index) in cards"
                    v-if = "card.genus === item"
                    >
                    {{card.name + ', '}}
                </span>
            </v-flex>
        </v-layout>
    </v-card>

其次，我想将每个属中的蔬菜名称显示为以逗号分隔的列表，但是当我们到达任何给定属的当前数组的最后一项时，我不知道如何计算，以便停止逗号被添加到该姓氏。

我正在确定如下独特的属：

uniqueGenera: function () {
  var vm = this;
  return function (keyname) {
    var output = [];
    var keys = [];

    vm.cards.forEach(function (card) {
      var key = card[keyname];

      if (keys.indexOf(key) === -1) {
        keys.push(key);
        output.push(card[keyname]);
      }
    });
    return output;
  };
},

Answer 1

听起来您可以从将数据映射到更有用的格式的计算属性中受益。例如，生产类似的东西

{
  "19": {
    name: "Allium",
    vegetables: ["Garlic", "Leek", "Onions", "Shallot", "Spring onions"]
  },
  "20": {
    name: "Brassica",
    vegetables: [...]
  },
  ...
}

就像是

computed: {
  genera () {
    return this.cards.reduce((genera, item) => {
      if (!Object.prototype.hasOwnProperty.call(genera, item.id)) {
        genera[item.id] = { id: item.id, name: item.genus, vegetables: [] }
      }
      genera[item.id].vegetables.push(item.name)
      return genera
    }, Object.create(null))
  }
}

现在您可以更轻松地迭代您的数据。例如

<v-card v-for="(genus, id) in genera" :key="id" ripple class="hand"
        @click="navigateTo(id)">
  <v-layout fill-height>
    <v-flex xs12 align-end flexbox>
      <p>{{ genus.name }}</p>
      <span>{{ genus.vegetables.join(', ') }}</span>
    </v-flex>
  </v-layout>
</v-card>