Vue перетащить, чтобы следовать выбору v-чип-группы

Question

Я использую Vue с возможностью перетаскивания, чтобы изменить положение моих V-чипов. Когда вы щелкаете по микросхеме, микросхема показывает Active и связывается с selection своим индексом. Проблема в том, что при перетаскивании чипа и изменении его положения он не обновляет индекс selection.

Как я могу убедиться, что одно следует за другим?

<v-chip-group
        v-model="selection"
        active-class="primary--text"
        column
>
    <draggable v-model="items" @start="drag=true" @end="drag=false">
        <v-chip v-for="(item, i) in items" :key="i"
                close
                draggable>
            {{item.name}}
        </v-chip>
    </draggable>
</v-chip-group>

Answer 1

Вы можете установить индекс выбора, используя @start и событие @end в перетаскиваемом компоненте

Вот рабочий код ручки: https://codepen.io/chansv/pen/zYvOYyd?editors=1010

Найдите рабочий код здесь:

    <div id="app">
  <v-app id="inspire">
    <v-card 
      max-width="400"
      class="mx-auto"
    >
      <v-card-text>
        <v-chip-group
          v-model="selection"
          column
          active-class="primary--text"
        >
          <draggable v-model="tags" @start="dragStart" @end="dragEnd">
            <v-chip v-for="(tag, i) in tags" :key="i" draggable>
              {{ tag.name }}
            </v-chip>
          </draggable>
        </v-chip-group>
      </v-card-text>
    </v-card>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    selection: null,
    currentTag: null,
    tags: [{
      name: 'Shoping',
    },{
      name: 'Art',
    }, {
      name: 'Tech',
    }, {
      name: 'Creative Writing'
    }
    ],
  }),
  methods: {
    dragStart() {
      if (this.tags[this.selection]) this.currentTag = this.tags[this.selection].name;
      else this.currentTag = null;
    },
    dragEnd() {
      var self = this;
      if (this.currentTag) {
        this.tags.forEach((x, i) => {
          if (x.name === self.currentTag) self.selection = i;
        });  
      }

    }
  }
})