CODEWITHSUNDEEP
javascriptlaravelvue.jsmulti-selectvue-multiselect
Norbertho
Norbertho

Reputation: 47

Laravel can't get the values from Vue-multiselect

I am using Vue-multiselect with Laravel.

I am using the multiselect component in my form to let the user select multiple countries. The component works fine but when I submit the form and I dd() it, it shows [object Object].

I can't get the value of the multiselect component. I have found similar questions but none of them worked for me.

Here is my code:

The ExampleComponent.vue file:

<template slot-scope="{ option }">
<div>

<label class="typo__label">Restricted country</label>
<multiselect
          v-model="internalValue"
          tag-placeholder="Add restricted country"
          placeholder="Search or add a country"
          label="name"
          name="selectedcountries[]"
          :options="options"
          :multiple="true"
          track-by="name"
          :taggable="true"
          @tag="addTag"
          >
</multiselect>

<pre class="language-json"><code>{{ internalValue  }}</code></pre>

</div>
</template>

<script>
 import Multiselect from 'vue-multiselect'

  // register globally
  Vue.component('multiselect', Multiselect)

  export default {

  components: {
  Multiselect
  },
   props: ['value'],
   data () {
   return {
   internalValue: this.value,
   options: [
    { name: 'Hungary' },
    { name: 'USA' },
    { name: 'China' }
     ]
   }
 },
watch: {
internalValue(v){
this.$emit('input', v);
}
},
methods: {
addTag (newTag) {
  const tag = {
    name: newTag,
    code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
  }
  this.options.push(tag)
  this.value.push(tag)
  }
 },

 }
 </script>

Here is my register form:

<div id="select">
  <example-component v-model="selectedValue"></example-component>
  <input type="hidden" name="countriespost" :value="selectedValue">
 </div>
 
<script>
   const select = new Vue({
      el: '#select',
      data: {
         selectedValue: null
           },
         });
</script>

When I submit the form, the countriespost shows me me this: [object Object] instead of the actual value.

Upvotes: 1

Views: 1274

Answers (2)

whmkr
whmkr

Reputation: 3075

If you pass an array of objects to the :options prop of the multiselect component, you should submit the form with javascript so you can extract the object ids or whatever you need on the backend and then send them through. Add a method like this:

submit: function() {
  let data = {
    objectIds: _.map(this.selectedOptions, option => option.id), //lodash library used here
    // whatever other data you need
  }
  axios.post('/form-submit-url', data).then(r =>  {
    console.log(r);
  });
}

Then trigger it with a @click.stop event on your submit button.

Upvotes: 0

Qrzy
Qrzy

Reputation: 186

It's because you are providing an array of objects as options property:

options: [
  { name: 'Hungary' },
  { name: 'USA' },
  { name: 'China' }
]

so the value emited on input is an object. Try to change the options to following:

options: [ 'Hungary', 'USA', 'China' ]

Upvotes: 1

Related Questions