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

我正在尝试用Vuejs 2实现自定义选择组件。正如文档中所述，我不应该直接修改值道具，并建议使用事件将所选数据传递给父组件。当选项值是一个对象时，我遇到了问题，取而代之的是[object object]

以下是我的选择组件模板：

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

这是父组件

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

我在等你

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

但是得到了[对象]

---

我错过什么了吗？

你的问题在于：

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

{{option[label]}

您将获取整个对象并将其指定给option元素的value属性。这不起作用，因为value属性必须是字符串。因此，对象被转换为

[object object]

您应该尝试使用

：value=“option.id”

，id值应该正常传递到父组件，您可以使用它来找到正确的类别。

https://www.npmjs.com/package/stf-vue-select
https://www.npmjs.com/package/stf-vue-select


<stf-select v-model="value" style="width: 300px; margin: 0 auto">
      <div slot="label">Input address</div>
      <div slot="value">
        <div v-if="value">
           <span>{{value.address}} (<small>{{value.text}}</small>)</span>
        </div>
      </div>
      <section class="options delivery_order__options">
          <stf-select-option  
           v-for="item of list" :key="item.id"
           :value="item"
           :class="{'stf-select-option_selected': item.id === (value && value.id)}" 
           >
              <span>{{item.text}} (<small>{{item.address}}</small>)</span>
          </stf-select-option>
      </section>
    </stf-select>

输入地址
{{value.address}}（{{value.text}）
{{item.text}}（{{item.address}}）

正如mzgajner所提到的，您不能绑定对象，因为它会将其转换为字符串。 但是，您可以在options组件中将对象转换为base64字符串，然后在select组件中再次对其进行解码

例如： 组件自定义选项

<template>
  <option v-bind="{ ...$attrs, value: innerValue }" v-on="$listeners">
    <slot>
      {{ label || $attrs.value }}
    </slot>
  </option>
</template>

<script>
export default {
  props: {
    label: [String, Number, Boolean],
  },
  computed: {
    innerValue() {
      return btoa(JSON.stringify(this.$attrs.value));
    },
  },
};
</script>

{{label | |$attrs.value}
导出默认值{
道具：{
标签：[字符串、数字、布尔值]，
},
计算：{
innerValue（）{
返回btoa（JSON.stringify（this.$attrs.value））；
},
},
};

组件自定义选择

<template>
  <select
    :value="innerValue"
    v-bind="$attrs"
    v-on="{
      ...$listeners,
      input: onInput,
    }"
  >
    <slot></slot>
  </select>
</template>

<script>
export default {
  props: {
    value: null
  },
  computed: {
    innerValue() {
      return btoa(JSON.stringify(this.value));
    },
  },
  methods: {
    onInput(e) {
      let value = JSON.parse(atob(e.target.value));
      this.$emit('input', value);
    },
  },
};
</script>

导出默认值{
道具：{
值：null
},
计算：{
innerValue（）{
返回btoa（JSON.stringify（this.value））；
},
},
方法：{
输入（e）{
让value=JSON.parse（atob（e.target.value））；
这是。$emit（'input'，value）；
},
},
};

虽然这可能会回答问题，但不赞成只使用代码的答案。请同时向OP提供解释，以解释您的答案。您好，我没有使用

：value=“option.id”

，而是使用

选项[event.target.selectedIndex-1]

，以便组件可以处理非对象选项。

<template>
  <option v-bind="{ ...$attrs, value: innerValue }" v-on="$listeners">
    <slot>
      {{ label || $attrs.value }}
    </slot>
  </option>
</template>

<script>
export default {
  props: {
    label: [String, Number, Boolean],
  },
  computed: {
    innerValue() {
      return btoa(JSON.stringify(this.$attrs.value));
    },
  },
};
</script>

<template>
  <select
    :value="innerValue"
    v-bind="$attrs"
    v-on="{
      ...$listeners,
      input: onInput,
    }"
  >
    <slot></slot>
  </select>
</template>

<script>
export default {
  props: {
    value: null
  },
  computed: {
    innerValue() {
      return btoa(JSON.stringify(this.value));
    },
  },
  methods: {
    onInput(e) {
      let value = JSON.parse(atob(e.target.value));
      this.$emit('input', value);
    },
  },
};
</script>