Home / Questions / 218229
Accepted
Alberto Ortega
Asked: 2020-11-30 12:30:41 +0800 CST 2020-11-30 12:30:41 +0800 CST

how to remove an element from an array vue js

  • 772

I have an array as follows.

[ "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: I will know the name of the element until the user clicks a button. Example, if the client clicks a button and the button has the value icon-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 does not do it as fast as I want.

this.array.slice(id, 1)
javascript

2 Answers

  1. Best Answer

    I don't really know what you're doing, I don't understand the _.pull(this.array, 'icono-9-8');.

    You can use splice()to delete an item better than slice()since vue watches the changes with splice()and modifies 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>

    • 2

  2. Hello, how about 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)

    • 0