Vue.js - How to remove an array element upon selection by <select> tag

Question

i want to remove elements from this array when they get selected but v-on:change is not the right option because when you select an item, the select value will change twice so the method will also get executed twice (two elements will be removed) i thought of making a new directive to do this job ,but i want to leave it as my last option ...thank you

new Vue({
el:"#app",
data :{
    arr:['1','2','3','4'],
     selected:""
  },
methods :{
splice (){
 this.arr.splice(this.arr.indexOf(this.selected),1)
     }
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select v-model="selected" @change="splice">
<option v-for="item in arr" >{{ item }}</option>
</select>
<div>

this was my attempt, but like i said it get executed twice because select value changes twice and also i want to do more stuff on item selection so maybe i should just make a directive

Your logic is not very clear. If all selected will be removed, what should be your selected state? — akuiper
– akuiper, Commented Dec 24, 2018 at 17:09
well , basically what i want is that when i select an item i want that exact item to be removed of my array — Abdelillah Aissani
– Abdelillah Aissani, Commented Dec 24, 2018 at 17:11
What I am guessing is that you don't need a select box as it doesn't seem to be a good fit here. Maybe a simple list which fires an event to remove the element when clicked? — akuiper
– akuiper, Commented Dec 24, 2018 at 17:13
Initially your selected is empty and when you use indexOf that will returns -1 you're removing the last selected one — Boussadjra Brahim
– Boussadjra Brahim, Commented Dec 24, 2018 at 17:13

Brian Lee · Accepted Answer · 2018-12-24 17:20:12Z

2

If you have a default option with a null value to fallback to, it will work by first re-assigning this.selected = null and then splicing the options array:

new Vue({
  el: "#app",
  data() {
    return {
      arr: ['1', '2', '3', '4'],
      selected: null
    }
  },
  methods: {
    removeElement(e) {
      this.selected = null
      this.arr.splice(this.arr.indexOf(e.target.value), 1)
    }
  }
})

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

<div id="app">
  <select v-model="selected" @change="removeElement">
    <option :value="null" disabled>-- Select --</option>
    <option v-for="item in arr">{{ item }}</option>
  </select>
</div>

answered Dec 24, 2018 at 17:20

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

akuiper · Accepted Answer · 2018-12-24 17:31:02Z

2

Here is an option using a simple list to achieve what you needed, which seems to be a better fit for your case;

new Vue({
  el: "#app",
  data: {
    arr: ['1','2','3','4'],
    removed: ""
  },
  methods: {
    splice (item, index) {
      this.removed = item
      this.arr.splice(index, 1)
    }
  }
})

ul {
  border: 1px solid black;
  overflow-y: scroll;
  height: 55px;
  width: 50px;
  padding: 0px;
}

li {
  list-style-type: none;
}

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

<div id="app">
  <ul>
    <li v-for="(item, index) in arr" @click="splice(item, index)">{{ item }}</li>
  </ul>
  Removed: {{ this.removed }}
</div>

answered Dec 24, 2018 at 17:31

akuiper

216k33 gold badges362 silver badges379 bronze badges

Comments

Boussadjra Brahim · Accepted Answer · 2018-12-24 17:32:57Z

2

Another solution is using watch property to watch the selected item and remove it from the array:

new Vue({
  el: "#app",
  data: {
    arr: ['1', '2', '3', '4'],
    selected: ""
  },
  methods: {

  },
  watch: {
    selected(v) {
      if (this.selected !== "") {
        this.arr.splice(this.arr.indexOf(v), 1)
      }
      this.selected=""
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="selected">
    <option v-for="item in arr">{{ item }}</option>
  </select>
  <div>

answered Dec 24, 2018 at 17:32

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

Vue.js - How to remove an array element upon selection by <select> tag

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related