Question

我在这里使用 Vue js -多选（https://vue-multiselect.js.org/）- Laravel

我正在使用表单中的multiselect组件网络，以允许用户选择多个国家。该组件工作正常，但是当我提交表单并转储并消亡时，它给了我这个“ [object Object]”

所以基本上我无法获得multiselect组件的值。我花了最后两天的时间来找到解决方案……没有运气。我发现了类似的问题，但没有一个对我有用。
希望有人可以帮助我。这是我的代码：

ExampleComponene.vue文件：

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

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

这是我的注册表：

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

当提交表格countrypost而不是multiselect值时，会给我这样：“ [object Object]”

Answer 1

这是因为您要提供一组对象作为options属性：

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

因此在input上发出的值是一个对象。尝试将选项更改为以下内容：

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

Answer 2

如果将对象数组传递给multiselect组件的:options属性，则应使用javascript提交表单，以便可以提取对象id或后端所需的任何对象，然后将其发送出去。添加这样的方法：

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);
  });
}

然后通过您的提交按钮上的@click.stop事件触发它。

Vue js-Multiselect-Laeravel Cant从multiselect中获取值

2 个答案: