小编Ada*_*tto的帖子

我正在使用 v-list-item-group 显示动态项目列表（可以创建/删除的实体），可以选择其中的列表以显示有关所选项目的更多信息。

到目前为止，我一直只是使用 v-list-item-group 模型来确定已选择哪个项目。

<template>

<v-list>
  <v-list-item-group v-model="listSelection">
    <v-list-item v-for="(item, index) in items" :key="index">

    </v-list-item>
  </v-list-item-group>
</v-list>

</template>


<script>

export default {

  props: {
    value: Object
  },

  computed: {
    items: function() {
      return this.$store.state.items // Collection of entities from a server
    },
    listSelection: {
      get: function() {
        return this.items.indexOf(this.value)
      },
      set: function(newVal) {
        this.$emit('input', this.items[newVal])
      }
    }
  },

}

</script>

这种方法适用于初始数据集，因为列表中的第一个元素是 中的第一个对象items，等等。但是，如果我在中间添加一个实体，或者删除某些内容，或者只是导致其中一个项目转移到列表中的不同位置，项目位置的索引无效。本质上，如果列表添加了一个新元素，不管它的位置如何，它的值（当在组中被选中时）是下一个最高的未使用值。例如：

let fruits = ['apple', 'carrot']

<v-list-item>苹果的值为 0，<v-list-item>胡萝卜的值为 1。

fruits.splice(1, 0, "banana") …