Я пытаюсь реализовать конструктор документов методом перетаскивания с помощью перетаскивания Vue, вы можете добавлять такие элементы, как заголовки, и изменять их порядок. Они включают использование компонентов с полями ввода в.
У меня все работает нормально, кроме случаев, когда вы вводите что-то в заголовок 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>
HeadingElement.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>
Кто-нибудь знает, почему поля ввода текстабудет обновлять в массиве, но НЕ обновлять позицию в браузере?
Спасибо