Javascript Vue draggable在切换时不会更新文本输入字段，但会在数组中更新它

我正在尝试使用Vue Dragable实现一个拖放文档生成器，您可以添加标题之类的元素并重新排列它们的顺序。这些包括在中使用具有输入字段的组件

我已经让它正常工作了，除了在标题1中键入一些内容，然后将其与标题2交换外，您键入的输入文本仍然处于标题1所在的位置，即使元素已交换。但奇怪的是，它确实正确地在数组列表中切换它

基本上，当您交换组件时，您键入的输入似乎不会保留在组件中。它要么停留在原来的位置，要么只是清除，这显然是非常有问题的

它使用一个在数组中循环的动态组件来显示列表，还包括发出一个对象，该对象随后在数组中更新：

AddNew.vue

<InsertContent @create="createNewElement($event, 0)" />
        <draggable :list="userData.packetSections" :options="{animation:750}" handle=".handle">
          <div
            class="element-wrapper"
            v-for="(section, index) in userData.packetSections"
            :key="index"
          >
            <div class="element">
              <component :is="section.type + 'Element'" @return="addData($event, index)" />
              <i class="remove" @click="removeElement(index)"></i>
            </div>
            <InsertContent @create="createNewElement($event, index + 1)" />
          </div>
        </draggable>

<script>
  data() {
    return {
      userData: {
        packetSections: [
          {
            type: "Heading",
            text: "test input", //<-- this swaps in the array when switched but does NOT swap in the browser
            id: ""
          },
          {
            type: "Heading",
            text: "test 2",
            id: ""
          },
        ],
      }
    };
  },
  methods: {
    createNewElement(event, index) {
      var element = {
        type: event,
        text: "",
        id: ""
      };
      this.userData.packetSections.splice(index, 0, element);
    },
    removeElement(index) {
      this.userData.packetSections.splice(index, 1);
    },
    addData(emittedData, index) {
      this.userData.packetSections.splice(index, 1, emittedData);
      console.log(emittedData, index);
    },
  }
};
</script>

<template>
  <div class="grey-box">
    <h3>Subheading</h3>
    <input type="text" v-model="data.text" @change="emitData" />
  </div>
</template>

<script>
export default {
  data(){
    return{
      data: {
        type: "Heading",
        text: "",
        id: ""
      }
    }
  },
  methods:{
    emitData(){
      this.$emit('return', this.data);
    }
  }
};
</script>

数据（）{
返回{
用户数据：{
包装部分：[
{
键入：“标题”，
text:“test input”，//对于任何感兴趣的人，我最终解决了这个问题。当您使用列表中也传递数据的动态组件时，必须将数组的内容作为道具传递

所以我把它改为：

致：

它工作得很好。
您的
id:“
在元素之间是相同的。您可以尝试使用唯一id吗？