Vue中如何展示下拉框选中商品变体对应的详细属性信息

实现方案 #

核心问题是当前仅将变体名称作为选项传给下拉组件，选中后只能拿到名称字符串，无法关联到完整的变体对象，以下提供两种实现方式：

方案一：修改Dropdown组件，直接传递完整变体对象（更推荐，避免重名问题） #

1. 调整Dropdown组件逻辑，兼容对象类型选项

<template>
    <div class="custom-select" :tabindex="tabindex" @blur="open = false">
        <div class="selected" :class="{ open: open }" @click="open = !open">
            {{ selected.name || selected }}
        </div>
        <div class="items" :class="{ selectHide: !open }">
            <div
                v-for="(option, i) of options"
                :key="i"
                @click="
          selected = option;
          open = false;
          $emit('input', option);
        "
            >
                {{ option.name || option }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        options: {
            type: Array,
            required: true,
        },
        default: {
            type: [String, Object],
            required: false,
            default: null,
        },
        tabindex: {
            type: Number,
            required: false,
            default: 0,
        },
    },
    data() {
        return {
            selected: this.default
                ? this.default
                : this.options.length > 0
                    ? this.options[0]
                    : null,
            open: false,
        };
    },
    mounted() {
        this.$emit("input", this.selected);
    },
};
</script>

2. 父组件调用逻辑调整

<template>
  <div>
    <Dropdown
       :options="variationList"
       :default="{name: 'Choose an option'}"
       class="select"
       v-model="selectedVariation"
    />
    <!-- 展示选中变体的完整信息 -->
    <div v-if="selectedVariation && selectedVariation.id" class="variation-info">
      <p>名称：{{ selectedVariation.name }}</p>
      <p>描述：{{ selectedVariation.description }}</p>
      <p>不含税价格：{{ selectedVariation.price_excl_vat }}</p>
      <p>创建时间：{{ selectedVariation.created_at }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 存储选中的完整变体对象
      selectedVariation: null,
      // 你原有存储的商品接口数据
      product: {}
    }
  },
  computed: {
    variationList() {
      // 直接返回完整的变体数组，不需要单独提取name
      return this.product?.attributes?.variations || []
    }
  }
}
</script>

方案二：不修改Dropdown组件，父层按选中名称匹配变体 #

如果你不想改动现有Dropdown组件的逻辑，可以通过监听选中的名称，匹配对应的完整变体对象：

<template>
  <div>
    <Dropdown
       :options="getVariations"
       :default="'Choose an option'"
       class="select"
       @input="handleSelect"
    />
    <div v-if="currentVariation" class="variation-info">
      <p>名称：{{ currentVariation.name }}</p>
      <p>描述：{{ currentVariation.description }}</p>
      <p>不含税价格：{{ currentVariation.price_excl_vat }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentVariation: null,
      product: {}
    }
  },
  computed: {
    getVariations() {
      return this.product.attributes.variations.map(p => p.name);
    },
  },
  methods: {
    handleSelect(selectedName) {
      if(selectedName === 'Choose an option') {
        this.currentVariation = null
        return
      }
      // 按选中的名称匹配对应的完整变体对象
      this.currentVariation = this.product.attributes.variations.find(item => item.name === selectedName)
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者magic bean