Доброе утро,
У меня есть следующая форма:
Когда вы нажимаете кнопку «Новый элемент», в соответствующий раздел добавляется новое текстовое поле. Если вы нажмете кнопку «Новый раздел», будет создан новый раздел. Когда вы нажимаете «X» в правом верхнем углу раздела, раздел успешно удаляется. Тем не менее, я пытаюсь реализовать «X» ниже (справа) каждого текстового поля «Добавление». Я думал, что это будет код, обратный добавлению дополнительного текстового поля, но с использованием функции splice(). Однако это не работает.
Мой код ниже, любая помощь будет принята с благодарностью.
var app = new Vue({
el: '.container',
data: {
sections: [{
item: '',
additionals: []
}]
},
methods: {
addNewSection() {
this.sections.push({
item: '',
additionals: []
})
},
addNewItem(id) {
this.sections[id].additionals.push({
item: ''
})
}
}
})<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="app">
<div class="container">
<button class="btn btn-success mt-5 mb-5" @click="addNewSection">
New Deal Section
</button>
<div class="card mb-3" v-for="(section, index) in sections">
<hr>
<div class="card-body">
<button class="btn btn-success mt-5 mb-5" @click="addNewItem(index)">
New Item
</button>
<span class="float-right" style="cursor:pointer">
X
</span>
<h4 class="card-title">Deal section {{ index + 1}}</h4>
<div class="employee-form" v-for="(addition, index) in section.additionals">
<input type="text" class="form-control mb-2" placeholder="Item" v-model="addition.item">
</div>
<div class="employee-form">
<input type="text" class="form-control mb-2" placeholder="Item" v-model="section.item">
</div>
</div>
</div>
</div>
</div>
