在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>