Вопросы Теги

Как удалять специфическую статью list-group?

У меня есть этот 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 (), так как прямо сейчас всегда меня удаляет первый элемент. Спасибо заранее!

2
задан 07.03.2019, 03:17
1 ответ

Нужно делать одну легкой 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>
3
ответ дан 19.11.2019, 22:30