Vue可拖动以跟随v-chip-group选择

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'
    }
    ],
  }),
  watch: {
    selection(val) {
      if (!val) this.currentTag = val;
    }
  },
  methods: {
    dragStart() {
      if (this.selection)
        this.currentTag = this.tags[this.selection].name;
    },
    dragEnd() {
      var self = this;
      if (this.currentTag) {
        this.tags.forEach((x, i) => {
          if (x.name === self.currentTag) self.selection = i;
        });  
      }

    }
  }
})