Я создал компонент в VueJS, который отображает два списка, один из которых пуст, и пользователь может нажать кнопку, чтобы добавить элемент, другой генерируется из массива с помощью подпрограмм в laravel. В обоих списках есть кнопка удаления для удаления нужного элемента. Проблема в том, что список, из которого заполняются элементы массива, не может быть удален
import './bootstrap'
import Vue from 'vue'
Vue.component('admin-cms-document',{
template:
`<div>
<div v-if="files">
<ul class="list-unstyled">
<li v-for="(file, index) in files">
<p>{{file.id}}</p>
<button type="button" @click="deleteFile(index)">Delete</button>
</li>
</ul>
</div>
<div v-else>
<ul class="list-unstyled">
<li v-for="(input, index) in inputs">
<input type="file" name="docs[]" @change="input.one">
<button type="button" @click="deleteNewFile(index)">Delete</button>
</li>
</ul>
<button type="button" @click="addRow">Add</button>
</div>
</div>`,
props: {
files: Array
},
data: function() {
return {
inputs: [],
files: []
}
},
methods: {
addRow() {
this.inputs.push({
one: '',
})
},
deleteNewFile(index) {
this.inputs.splice(index,1)
},
deleteFile(index) {
this.files.splice(index, 1)
}
}
});
var app = new Vue({
el: '#app',
data: {
inputs: [],
},
methods: {
addRow() {
this.inputs.push({
one: '',
})
},
deleteNewFile(index) {
this.inputs.splice(index,1);
},
deleteFile(index) {
this.files.splice(index, 1)
}
}
})