How to remove item from an array by filtering by value?

Question

I have a certain array:

acoes_selecionadas: ['nome1', 'nome2'];

I’m using that function, but splice works based on element ID, need to find a way to remove by value.

seta_vender: function() {
    this.vender = !this.vender;
    if (this.vender) {
        this.acoes_selecionadas.push('Vender');
    } else {
        this.acoes_selecionadas.splice('Vender');
    }
}

Answer 1

You can use Javascript Array indexof() Method to find the value index and remove the element from the list using splice (as mentioned in the question). In this example you can directly pass the index by v-for.

new Vue({
  el: '#app',
  data: {
    acoes_selecionadas: ['nome1', 'nome2']
  },
  methods: {
    seta_vender(valor) {
      var indice = this.acoes_selecionadas.indexOf(valor)
      this.acoes_selecionadas.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='valor in acoes_selecionadas' @click='seta_vender(valor)'>
        {{valor}}
      </li>
    </ul>
  </div>

Answer 2

Friend, I would use the function filter Javascript.

Giving a basic explanation, it interacts with its array, and when the imposed condition is true, it returns the element, already concatenating it back to the array. When it is false, the element is not retouched.

seta_vender : acoes_selecionadas.filter((val) => {
   return vender != val;
});

I hope I’ve helped.

Edit: Change in logic, as commented by Anderson.

Answer 3

Instead of searching for the index of the element with each click, you can use the v-for indexed:

<li v-for="(valor, index) in valores" @click="remove(i)">

It gets simpler, faster and more direct.

new Vue({
  el: "#app",
  data: {
    valores: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
  },
  methods: {
    remove: function(i) {
      this.valores.splice(i, 1)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="(valor, index) in valores" @click="remove(index)">
      {{ valor }} ({{ index }})
    </li>
  </ul>
</div>