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

Question

我正在尝试使用 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>

这是脚本部分：

export default {
    props: {
        value: {
            default() {
               return ''
            }
        },
        options: {
            type: Array,
            require: true
        },
        ...
    },
    methods: {
        setValue(val) {
            this.error.clear();
            this.$emit('input', val);
        }
    }
}

这是父组件

<input-select-horizontal
    v-model="form.category"
    :label-class="{'col-md-4': true}"
    input-length="col-md-8"
    :options="categories.all()"
    label="name"
    :error="form.errors.get('category_id')">
<span slot="label">Category <span class="required" aria-required="true">*</span></span>

选项：

[
    {
        id: 1,
        name: 'Category 1',
        description: 'desc 1'
    },
    {
        id: 2,
        name: 'Category 2',
        description: 'desc 2'
    },
    ...
]

我期待着

form.category = {
    id: 1,
    name: "Category 1",
    description: "desc 1"
}

但得到了 [Object object]

我错过了什么？

Answer 1

你的问题在这里：

<option v-for="option in options" :value="option">
  {{ option[label] }}
</option>

您正在获取整个对象并将其分配给 option 元素的 value 属性。这行不通，因为 value 属性必须是字符串。所以对象被转换为[Object object].

您应该尝试使用:value="option.id"，ID 值应该可以正常传递到父组件，您可以使用它来找到正确的类别。