我使用Vue js-从此处进行多重选择(https://vue-multiselect.js.org/)-Laravel
我在表单中使用的是multiselect componenet,以便用户选择多个国家。该组件工作正常,但是当我提交表单并转储并消亡时,它给了我这个“ [对象对象]”
因此,基本上我无法获得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]”
最佳答案
这是因为您要提供一个对象数组作为options
属性:
options: [
{ name: 'Hungary' },
{ name: 'USA' },
{ name: 'China' }
]
因此,在
input
上发出的值是一个对象。尝试将选项更改为以下内容:
options: [ 'Hungary', 'USA', 'China' ]
关于javascript - Vue JS-Multiselect-Laravel无法从multiselect获取值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51846897/