0

我正在尝试使用 Vue 可拖动实现拖放文档构建器，您可以添加标题等元素并重新排列它们的顺序。这些涉及使用带有输入字段的组件。

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

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

它使用一个动态组件循环遍历数组来显示列表，它还涉及发出一个对象，然后在数组中更新：

添加新的.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>

标题元素.vue

<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>

有谁知道为什么文本输入字段会在数组中更新但不会更新浏览器中的位置？

谢谢

4

1 回答 1

0

对于任何感兴趣的人，我最终解决了这个问题。当您在列表中使用同时传递数据的动态组件时，您必须将数组的内容作为道具传递。

所以我把它从： <component :is="section.type + 'Element'" @return="addData($event, index)" />

至： <component :is="section.type + 'Element'" :data="userData.packetSections[index]" @return="addData($event, index)" />

它工作得很好。

于 2019-10-17T10:54:28.833 回答