[Vuejs]-Vue multiselect not getting id and name

0๐Ÿ‘

โœ…

You need new field in your data and watcher for value so try something like this:

<multiselect v-model="selected"...></multiselect>
data () {
    selected: []
    ...
},
watch: {
    selected (newValues) {
         this.form.books = newValues.map(obj => obj.id)
    }
}

I think that is what you need.

I found a lot of issues about that and package doesnโ€™t have prop for that.

You can read more on there: link1, link2

Good luck!

0๐Ÿ‘

DB::table('books')->select('id,name')->where('id','like',"%$search%")
                    ->orWhere('name','like',"%$search%")
                    ->orWhere('sku','like',"%$search%")
                    ->orWhere('sale_price','like',"%$search$")
                    ->limit(5)->get();

0๐Ÿ‘

<template>
    <div> 
        <multiselect  v-model="yourForm.bindThis" :options="options" :custom-label="showItems" placeholder="Select one" :label="options.name_of_a_column_from_record" :track-by="options.id_of_record" :multiple="true"></multiselect>
    </div>
</template>

<script>
import Multiselect from 'vue-multiselect';

data(){
   return{
      options: [],
      yourForm: {
        bindThis: '',
      }
   }
},

methods:{
   showItems({data}){
      return `${data.name_of_a_column_from_record}`;
   }

}
</script>

Let me know if it did the magic

0๐Ÿ‘

Add track-by and label props.

               <multiselect
                  v-model="form.users"
                  :options="scholars"
                  :multiple="true"
                  :searchable="true"
                  label="name"
                  track-by="id"
                  >
              </multiselect>

Leave a comment