2

Tengo este 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 este 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
      })
    }
  }   
});

entonces mi duda es como puedo pasarle el índex en concreto del ítem que quiero eliminar al .splice(), ya que ahora mismo siempre me elimina el primer elemento. Gracias de antemano!

1 respuesta 1

3

Hay que hacer una ligera modificación a lo que ya tienes, lo primero es que ahora tu método eliminar recibe 1 parámetro y este es el indice donde se encuentra el elemento a eliminar dentro de tu array películas;

Codigo HTML modificado;

<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>

Nota que ahora el v-for esta constituido por item,index donde item es el contenido y index es el indice o la posición donde se encuentra el elemento a eliminar.

VueApp;

elim : function(idPelicula) {
  this.pelicules.splice(idPelicula,1);
}

Resultado;

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.