vueDraggable拖拽多个相同input如何绑定数据

要实现vueDraggable拖拽多个相同的input并绑定数据，可以使用v-model指令将每个input与对应的数据绑定起来。

首先，你需要在data中定义一个数组，用来存储每个input的数据。例如：

data() {
  return {
    inputs: [
      { text: 'Input 1' },
      { text: 'Input 2' },
      { text: 'Input 3' }
    ]
  }
}

然后，在模板中使用vueDraggable组件来展示每个input，并使用v-model指令将input与对应的数据绑定起来。例如：

<draggable v-model="inputs">
  <div v-for="(input, index) in inputs" :key="index">
    <input v-model="input.text" type="text">
  </div>
</draggable>

在这个例子中，每个input都通过v-model指令与对应的输入数据进行双向绑定。当input的值发生变化时，对应的数据也会被更新。当你拖拽input时，数组中的顺序也会被调整。

最后，你可以在methods中添加一个方法，用来在拖拽结束时打印每个input的数据。例如：

methods: {
  onDragEnd() {
    console.log(this.inputs);
  }
}

你可以通过在vueDraggable组件上添加@end事件来调用这个方法：

<draggable v-model="inputs" @end="onDragEnd">
  ...
</draggable>

这样，当你拖拽结束时，控制台会打印出每个input的数据。

希望这个例子可以帮助到你