小编Laz*_*ina的帖子

带有对象值的 Vue 自定义选择组件

我正在尝试使用 Vuejs 2 实现自定义选择组件。如文档中所述,我不应该直接修改 value props 并建议使用 event 将所选数据传递给父组件。I'm having issue when the option value is an object and got [Object object] instead.

这是我选择的组件模板:

<div :class="inputLength">
        <select :id="id"
                :value="value"
                @change="setValue($event.target.value)"
                :multiple="multiple"
                class="selectpicker">
            <option value="">Nothing selected.</option>
            <option :selected="option == value" v-for="option in options"
                    :value="option">
                {{ option[label] }}
            </option>
        </select>
        <span v-if="error.any()" class="help-block" v-text="error.all()"></span>

</div>
Run Code Online (Sandbox Code Playgroud)

这是脚本部分:

export default {
    props: {
        value: {
            default() {
               return ''
            }
        },
        options: {
            type: Array,
            require: true
        },
        ...
    },
    methods: {
        setValue(val) { …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js

4
推荐指数
1
解决办法
2万
查看次数

标签 统计

javascript ×1

vue.js ×1