Управление моделью v-list-item-group с помощью объекта вместо индекса списка - PullRequest
Новая
       5

Управление моделью v-list-item-group с помощью объекта вместо индекса списка

2 голосов
/ 20 января 2020

Я использую v-list-item-group для отображения списка динамических c элементов (объектов, которые можно создавать / удалять), из которых можно выбрать отображение дополнительной информации о выбранном элементе.

До этого момента я просто использовал модель 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, et c. Однако, если я добавлю сущность посередине, или удалю что-то, или просто заставлю один из элементов сместиться на другую позицию в списке, индексная позиция станет недействительной. По сути, если список добавляет новый элемент, независимо от его положения, его значение (при выборе в группе) является следующим по значению неиспользованным значением. Например: 

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-моделью и значением в v-list-item-group, но так и не выяснили, как избежать этой проблемы. Я был бы согласен с добавлением @click к моим элементам и установкой элементов на value вместо вычислений на основе списка, но я бы хотел, чтобы выбор списка сохранялся на основе value.

Насколько я читал, документация указывает, что выбор в списках должен обрабатываться с использованием v-list-item-group, но компонент, кажется, не поддерживает динамически c слишком хорошо перечисляет.

1 Ответ

1 голос
/ 20 января 2020

После дополнительной проверки документации <v-list-item> поддерживает значение prop, позволяющее <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" :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>
...