Vue js Multiselect how to pass selected values to the RegisterController?

First of all, there's no need to add an extra input "selectedcountries2", you can submit your values straight from the multiselect, as it is bound to "value" with the v-model attribute.

Also, you've imported multiselect locally (in the component you've pasted), but right after that you import it globally. For starters, I suggest you remove the global import, as it makes little sense in this context.

Then, can you tell us exactly what goes wrong? Do you have the vue devtools extension in your browser which allows you to see the values assigned to your properties? Is the console showing any errors?

Is the multi-select working at all? Which library are you using exactly, and have you followed the instructions?

Hi, Thanks for the reply. There is no error I just cant get the selected value. It seams to me that the values doesnt get posted when is submit the form.

• I am using this library https://vue-multiselect.js.org/
• I try to use it in Laravel
• Yes I have vue dev tools installed
• Yes the multiselect component works fine, i can select countries and delete them as it expected also in the vue dev tool i can see that the value is updated accordingly to my selection. For example if i select Hungary and China then vue dev tool show this:

props
    value:Array[2]
          0:Object
           name:"Hungary"
              1:Object
           name:"China"

data
    internalValue:Array[2]
       0:Object
        name:"Hungary"
        1:Object
        name:"China"
    
    options:Array[3]
       0:Object
        name:"Hungary"
        1:Object
        name:"USA"
        2:Object
        name:"China"

But when i submit the form i dont get the value there is no error but i have this :

selectedcountries   
array:1 [▼
  0 => ""
]
selectedvalues2 
"[object Object],[object Object]"

Here is my latest code:

<!-- Vue component -->

<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'

  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>

  <div id="select">
                  <example-component v-model="selectedValue"></example-component>
                  <input type="hidden" name="selectedvalues2" :value="selectedValue">
  </div>


<script>
       const select = new Vue({
                    el: '#select',
                    data: {
                      selectedValue: null

                    },
                });
</script>

Does it help if you change this:

<input type="hidden" name="selectedvalues2" :value="selectedValue">

to this:

<input type="hidden" name="selectedvalues2[]" :value="selectedValue">

Unfortunately not. Gives this:

selectedcountries   
array:1 [▼
  0 => ""
]
selectedvalues2 
array:1 [▼
  0 => "[object Object],[object Object]"
]

Hm, what if you json encode selectedvalues2?

json encode selectedvalues2 gives this:

""[object Object],[object Object]""

The problem is that I providing an array of objects as options property:

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

So i do like this now and it is working finally

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

Now it gives back this when i submit:

selectedcountries   
array:1 [▼
  0 => ""
]
selectedvalues2 
"Hungary,China"

So i can work with selectedvalues2 now

Component code is looks like this now:

<!-- Vue component -->

<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"
              name="selectedcountries[]"
              :options="options"
              :multiple="true"
              :taggable="true"
              @tag="addTag"
              >
  </multiselect>

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

</div>
</template>

<script>
  import Multiselect from 'vue-multiselect'

  export default {

  components: {
    Multiselect
  },
  props: ['value'],
  data () {
    return {
      internalValue: this.value,
      options: [
      'Hungary', 'USA', '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>

Ah you're right, I overlooked that part. By the way, are you submitting the html form, or are you using an ajax request?

Submitting html, not ajax

I see. Generally you have more control if you submit it from your js, so if you're in that context already (a vue app containing a form instead of a single component inside your form), you might want to look into it. Anyway, good to see you've figured it out!

For those who have objects with multiple attributes, this may help: https://stackoverflow.com/a/62031878/2311074