使用对象而不是列表索引操作 v-list-item-group 模型

Question

我正在使用 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")

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

我已经对 v-model 和 value inv-list-item-group进行了很多尝试，但还没有想出如何避免这个问题。我可以@click在我的项目上添加 a ，并将项目设置为 a value，而不是基于列表进行计算，但我希望基于value.

据我所知，文档表明应该使用 v-list-item-group 处理列表中的选择，但该组件似乎不太支持动态列表。

Answer 1

对文档进行额外检查后，<v-list-item>支持值道具，允许<v-list-item-group使用指定值而不是项目索引。

因此，解决方案是简单地将项目 id 指定为每个项目的值，然后使用 id 作为管理项目组模型的手段。

<template>

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

    </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.value.id
      },
      set: function(newVal) {
        this.$emit('input', this.items.find(item => item.id === newVal)
      }
    }
  },

}

</script>