Search code examples
vue.jsvue-multiselect

Vue-Multiselect remove event how to get the value and id


I am new to VueJs, i am using vue-multiselect and need to get the removed item information.

Eg.: after choosing one or more itens and removing one of them, by clicking on the tag, how can i use the @remove event and get all the information i need like value and id?

Let´s say i have one array like this : ['food', 'farmacy']

How can i access theses values if they are removed from vuejs-multiselect ?

I write :

   <multiselect v-model="value" 
                track-by="code" 
                :options="options" 
                :multiple="true" 
                :taggable="true" 
                placeholder="Choose one category" 
                label="name"
                @remove="toggleUnSelectMarket(value, id)"></multiselect>

I just pass value and id as parameters to the toggleUnSelectLojas function but did not know how to find the information i need :

toggleUnSelectLojas: function(value, id)
  {          

     console.log(' Teste toggleUnSelectMarkets value : ', value)
     console.log(' Teste toggleUnSelectMarkets id : ', id)
  },

Solution

  • check out this Sandbox

    you don't need to pass any parameters on removal the event contains the regarding object. What you than can do is:

    <template>
      <div id="app">
        <vue-multiselect
          v-bind:options="list"
          v-model="value"
          multiple
          label="id"
          track-by="id"
          @remove="toggleUnSelectMarket"
        ></vue-multiselect>
      </div>
    </template>
    
    <script>
    import vueMultiselect from "vue-multiselect";
    
    export default {
      components: {
        vueMultiselect
      },
      methods: {
        toggleUnSelectMarket({ value, id }) {
          this.toggleUnSelectLojas(value, id);
        },
        toggleUnSelectLojas(value, id) {
          console.log(" Teste toggleUnSelectLojas value : ", value);
          console.log(" Teste toggleUnSelectLojas id : ", id);
        }
      },
      data() {
        return {
          value: [],
          list: [
            {
              id: "1",
              value: 2
            },
            {
              id: "2",
              value: 3
            }
          ]
        };
      }
    };
    </script>