У меня есть этот HTML:
<div id="app" class="card m-auto p-3">
<div class="input-group mb-3">
<input v-model="nomPelicula" type="text" class="form-control" placeholder="Introdueix nom pel·lícula" aria-label="Recipient's username" aria-describedby="button-addon2">
<div id="click" class="input-group-append">
<button v-on:click="film" class="btn btn-primary" type="button" id="button-addon">ADD</button>
</div>
</div>
<ul class="list-group list-group-flush ">
<li v-for="item in pelicules" class="list-group-item">
<button v-on:click="elim" class="btn btn-danger pull-right" type="button" id="button-addon2">DELETE</button>
{{ item.titol }}</li>
</ul>
</div>
i этот vue.js:
var click = new Vue({
el: '#app',
data: {
nomPelicula: "",
pelicules: []
},
methods: {
film: function(event) {
this.pelicules.push({
titol: this.nomPelicula
})
},
elim : function(event) {
this.pelicules.splice(0,1)({
titol: this.nomPelicula
})
}
}
});
тогда мое сомнение такое, как я могу перемещать его índex в частности статьи, которую я хочу удалить в .splice (), так как прямо сейчас всегда меня удаляет первый элемент. Спасибо заранее!
Нужно делать одну легкой modificaciГіn в то, что уже у тебя есть, первое состоит в том, что сейчас ты mГ©todo удалять получает 1 parГЎmetro и это индекс, где находится элемент, который нужно удалять внутри твоего array películas
;
Код измененный HTML;
<ul class="list-group list-group-flush ">
<li v-for="(item,index) in pelicules" class="list-group-item">
<button v-on:click="elim(index)" class="btn btn-danger pull-right" type="button" id="button-addon2">DELETE</button>
{{ item.titol }}</li>
</ul>
Ощущается, что он сейчас учрежден v-for
item,index
, где статья - контент и index - индекс или она posiciГіn, где находится элемент, который нужно удалять.
VueApp; Последованные
elim : function(idPelicula) {
this.pelicules.splice(idPelicula,1);
}
;
var click = new Vue({
el: '#app',
data: {
nomPelicula: "",
pelicules: []
},
methods: {
film: function(event) {
this.pelicules.push({
titol: this.nomPelicula
})
},
elim : function(idPelicula) {
this.pelicules.splice(idPelicula,1);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="card m-auto p-3">
<div class="input-group mb-3">
<input v-model="nomPelicula" type="text" class="form-control" placeholder="Introdueix nom pel·lícula" aria-label="Recipient's username" aria-describedby="button-addon2">
<div id="click" class="input-group-append">
<button v-on:click="film" class="btn btn-primary" type="button" id="button-addon">ADD</button>
</div>
</div>
<ul class="list-group list-group-flush ">
<li v-for="(item,index) in pelicules" class="list-group-item">
<button v-on:click="elim(index)" class="btn btn-danger pull-right" type="button" id="button-addon2">DELETE</button>
{{ item.titol }}</li>
</ul>
</div>