how to remove an element from an array vue js

Navigation
2

I have an array in the following way. 

[ "icono-5-4", "icono-7-6", "icono-8-7", "icono-9-8", "icono-1-0", "icono-2-1" ]

I want to reactively remove an element: Know the name of the item until the user clicks on a button. Example, if the client clicks on a button and the button has the value icono-9-8

I would have to delete that element from my array 

[ "icono-5-4", "icono-7-6", "icono-8-7", "icono-1-0", "icono-2-1" ]

and so on for this I use: 

_.pull(this.array, 'icono-9-8');

but this is not reactive or it does not do it as fast as I want. 

this.array.slice(id, 1)
    
asked by Alberto Ortega 29.11.2018 в 21:30
source

2 answers

1

I'm not sure what you're doing, I do not understand what _.pull(this.array, 'icono-9-8'); .

You can use splice() to remove an item better than slice() since you see the changes with splice() and modify the array instead of creating a new one. 

new Vue({
  el: "#app",
  data: {
    lista: ["icono-5-4", "icono-7-6", "icono-8-7", "icono-9-8", "icono-1-0", "icono-2-1"]
  },
  methods: {
    del: function() {
      var indice = this.lista.indexOf('icono-9-8');
      if (indice != -1)
        this.lista.splice(indice, 1);
    }
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="item in lista">
      {{ item }}
    </li>
  </ul>
  <button @click="del">
  borrar
  </button>

</div>
    
answered by 30.11.2018 / 12:57
source
0

Hello, what if you try with array filter: 

let arr = ["a", "b", "c", "d"]

let value = "b"

arr = arr.filter(function(item) {
  return item !== value
})

console.log(arr)
    
answered by 30.11.2018 в 03:24
fetchColumn vs. columnCount Insert in two tables at once