vue.js - vue可拖动跟随v-chip-group选择

Question

我正在使用 Vue draggable 来改变我的 v-chips 的位置。当您单击一个筹码时，该筹码会显示Active 并与其索引绑定(bind)到selection。问题是，当您拖动图 block 并更改其位置时，它不会更新 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;
        });  
      }

    }
  }
})