How to remove the selected data from an array in vue js?

Question

I am in the need of splicing a data from the array, for which i have used the following,

Html:

           <div id="app">
                <select v-model="facilityAvailable" name="facilities" multiple="multiple" id="facilities" size="4" class="form-control">
                  <option v-for="availability in availableFacilities" v-bind:value="availability">{{availability.label}}--</option>
                </select>
                <a @click="removeFacilities" class="btn btn-default remove_option" rel="facilities2" id="remove"><i class="fa fa-arrow-left"></i></a>
                <a @click="addFacilities" class="btn btn-default add_option" rel="facilities2" id="add"><i class="fa fa-arrow-right"></i></a>
                <select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities2" size="4" class="form-control">
                  <option v-for="facility in selectedFacilities" v-bind:value="facility">{{facility.label}}</option>
                </select>

            </div>

Script:

new Vue({
  el: "#app",
  data: {
   facilityAvailable: [],
      facilitySelected:[],
      availableFacilities: [{
        value: 0,
        label: 'Double (Non a/c)'
      },
      {
        value: 1,
        label: 'Premium Double (a/c)'
      },
      {
        value: 2,
        label: 'Standard Double (a/c)'
      }
    ],
    selectedFacilities: [],
  },
  methods: {
    removeFacilities() {
    this.availableFacilities = this.facilitySelected.concat(this.availableFacilities);
    this.selectedFacilities.splice(this.availableFacilities.value,1);
    },
    addFacilities() {
    this.selectedFacilities = this.facilityAvailable.concat(this.selectedFacilities);
    this.availableFacilities.splice(this.selectedFacilities.value,1);
    }
  }
})

Here i am doing like transfer of one element from one select box to the other to another select box, for which i have used concat for adding to another and splice to remove that element.. Everything was fine upto this. But when i splice , it is splicing in the order of 0,1,2 i need to splice based on the index number of that particular element. In clear, i can select and remove the element in any order for which that particular element needs to be removed and gets transferred into second select box, whereas now if i remove it in the order as it was , its working fine but whereas if i change the order and splice its not working. Also when i select multiple elements and remove, the same thing happening. Kindly help me to solve this issue.

The fiddle link was, https://jsfiddle.net/pmvp3td6/9/

What you get in index in your methods is just the standard MouseEvent object. — connexo
– connexo, Commented Aug 11, 2017 at 5:21
addFacilities() { var that = this; console.log(that); - that should be the selected element, anyway in plain js, but not sure in vue. — Marko
– Marko, Commented Aug 11, 2017 at 5:39
The solution you refer to is different in nature. It uses a list, not a select element. While creating the list, the author gave it v-for="(item, index) in items" and created a button for each iteration. You have a button completely outside of your iteration block, so index won't be available where you expect it. — connexo
– connexo, Commented Aug 11, 2017 at 5:40
@connexo, I got your point and now i have updated it with getting the value of availableFacilities.. But i think the way i am approaching is wrong. — Maniraj Murugan
– Maniraj Murugan, Commented Aug 11, 2017 at 5:43

Sylvain Attoumani · Accepted Answer · 2017-08-12 09:48:56Z

1

I'm not sure i understood right what you are looking for but try with that in your addFacilities :

 addFacilities() {
    let i = 0;
    for(i; i<this.facilityAvailable.length;i++){ 
        this.selectedFacilities.push(this.facilityAvailable[i]);
        this.availableFacilities = this.availableFacilities.filter(facilities => facilities.value != this.facilityAvailable[i].value);
    }
}

If that's what you want you can do something similar in the remove part

answered Aug 12, 2017 at 9:48

Sylvain Attoumani

1,2041 gold badge16 silver badges36 bronze badges

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

Comments

Shubham Patel · Accepted Answer · 2017-08-11 08:50:37Z

0

Have a look at Element-UI's Transfer component. This should solve your problem.

answered Aug 11, 2017 at 8:50

Shubham Patel

3,3091 gold badge26 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to remove the selected data from an array in vue js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related