#vue.js #vuejs3
Вопрос:
У меня есть два компонента, первый из которых представляет собой таблицу вставки строк, а второй содержит строки
У меня проблема с входами, все работает нормально, за исключением того, что, когда я удаляю строку в середине таблицы, значения других входов сбрасываются,
родительский компонент :
lt;scriptgt; import editortable from "./editortable.vue"; export default { data: () =gt; { return { elements: [{ id: 0, ref: "1", equation: "2" }], nextid: "1", }; }, methods: { removrow(index) { this.elements.splice(index, 1); }, add() { this.elements.push({ id: this.nextid , ref: "", }); }, }, components: { editortable, }, }; lt;/scriptgt; lt;tbodygt; lt;tr is="vue:editortable" v-for="(element, index) in elements" :iden="element.id" :referen="element.ref" :eq="element.equation" :key="index" @delete="removrow(index)" gt;lt;/trgt; lt;/tbodygt; lt;button type=" button" class="btn btn-primary" @click="add"gt; Ajouter une ligne lt;/buttongt; ** компонент :**
lt;scriptgt; export default { props: ["iden", "referen", "eq"], emits: ["delete"], methods: { deleterow() { this.$emit("delete"); }, }, }; lt;/scriptgt; lt;templategt; lt;trgt; lt;tdgt; lt;input class="form-control" type="ipunt" :value="iden" /gt; lt;/tdgt; lt;tdgt;lt;input class="form-control" type="ipunt" :value="referen" /gt;lt;/tdgt; lt;tdgt;lt;input class="form-control" type="ipunt" :value="eq" disabled /gt;lt;/tdgt; lt;tdgt; lt;button type="button" class="btn btn-danger" @click="deleterow"gt; delete lt;/buttongt; lt;/tdgt; lt;/trgt; lt;/templategt; Ответ №1:
Существует 1 очевидная проблема, заключающаяся в том, что вы не должны использовать индекс в качестве ключа в вашем случае. Измените его, чтобы использовать идентификатор.
:key="element.id" И removrow(id) , используя идентификатор, сначала найдите индекс, а затем удалите его, все должно быть в порядке.
removrow(id) { const index = this.elements.findIndex(ele =gt; ele.id === id); this.elements.splice(index, 1); } Комментарии:
1. Огромное спасибо!
2. @Norman Нет проблем, если этот ответ помог вам решить проблему, пожалуйста, отметьте его как принятый ответ.