如何在Vue中显示选中值的信息

Question

我有一个 API 来获取数据，它是这样的：

"data": {
    "type": "products",
    "id": "2021-01-04.1.1",
    "attributes": {
      "name": "product 1",
      "descriptions": "some description",
      "image": null,
      "date": "2021-01-04",
      "valid_from": null,
      "valig_untill": null,
      "xparc_paid_product_id": 1,
      "xparc_unpaid_product_id": 1,
      "xparc_access_id": 1,
      "stock": null,
      "variations": [
        {
          "id": 1,
          "product_template_id": "1",
          "name": "child ticket",
          "description": "Only for children!",
          "price_excl_vat": 1,
          "created_at": "2021-09-15T13:16:00.000000Z",
          "updated_at": "2021-09-15T13:16:00.000000Z"
        },
        {
          "id": 2,
          "product_template_id": "1",
          "name": "Adults",
          "description": "Not for children!",
          "price_excl_vat": 2,
          "created_at": "2021-09-15T13:16:10.000000Z",
          "updated_at": "2021-09-15T13:16:10.000000Z"
        },
        {
          "id": 3,
          "product_template_id": "1",
          "name": "Test",
          "description": "Test",
          "price_excl_vat": 10,
          "created_at": "2021-09-30T11:29:44.000000Z",
          "updated_at": "2021-09-30T11:29:44.000000Z"
        }
      ]
    },

我想做的是将这些数据变体放入下拉列表中，如图所示：

这是我的下拉组件：

<template>
    <div class="custom-select" :tabindex="tabindex" @blur="open = false">
        <div class="selected" :class="{ open: open }" @click="open = !open">
            {{ 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 }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        options: {
            type: Array,
            required: true,
        },
        default: {
            type: String,
            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>

这就是我在下拉列表中显示变体名称的方式：

<Dropdown
   :options="getVariations"
   :default="'Choose an option'"
   class="select"
/>
computed: {
  getVariations() {
    return this.product.attributes.variations.map(p => p.name);
  },
},

所以我想做的是根据所选的值，我想在 div 内显示所选变体的更多信息。例如这里：

{{variations.description}} 但是我不知道该怎么做。你能帮助我吗？

Answer 1

要在 Dropdown 组件中显示它，请发送来自以下计算的数据：

computed: {
  variations() {
    return this.data.attributes.variations
  }
}

然后我的模板显示数据如下：

{{ selected.name }}

为了在父组件发出事件 $emit('input', option) 上显示描述，所以尝试在方法

中监听 @input="getSelected" 和过滤数据

getSelected(opt) {
  this.sel = opt.description
}

Vue.component('Dropdown', {
  template: `
    <div class="custom-select" :tabindex="tabindex" @blur="open = false">
        <div class="selected" :class="{ open: open }" @click="open = !open">
            {{ selected.name }}
        </div>
        <p>Description child :{{ selected.description }}</p>
        <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 }}
            </div>
        </div>
        
    </div>
  `,
   props: {
        options: {
            type: Array,
            required: true,
        },
        default: {
            type: String,
            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);
    },
})

new Vue({
  el: '#demo',
  data(){
    return {
      "data": 
          {
            "type": "products",
            "id": "2021-01-04.1.1",
            "attributes": {
              "name": "product 1",
              "descriptions": "some description",
              "image": null,
              "date": "2021-01-04",
              "valid_from": null,
              "valig_untill": null,
              "xparc_paid_product_id": 1,
              "xparc_unpaid_product_id": 1,
              "xparc_access_id": 1,
              "stock": null,
              "variations": [
                {
                  "id": 1,
                  "product_template_id": "1",
                  "name": "child ticket",
                  "description": "Only for children!",
                  "price_excl_vat": 1,
                  "created_at": "2021-09-15T13:16:00.000000Z",
                  "updated_at": "2021-09-15T13:16:00.000000Z"
                },
                {
                  "id": 2,
                  "product_template_id": "1",
                  "name": "Adults",
                  "description": "Not for children!",
                  "price_excl_vat": 2,
                  "created_at": "2021-09-15T13:16:10.000000Z",
                  "updated_at": "2021-09-15T13:16:10.000000Z"
                },
                {
                  "id": 3,
                  "product_template_id": "1",
                  "name": "Test",
                  "description": "Test",
                  "price_excl_vat": 10,
                  "created_at": "2021-09-30T11:29:44.000000Z",
                  "updated_at": "2021-09-30T11:29:44.000000Z"
                }
              ]
            },
          },
          sel: ''
        
    }
  },
  computed: {
    variations() {
      return this.data.attributes.variations
    }
  },
  methods: {
    getSelected(opt) {
      this.sel = opt.description
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <h3>Description parent :{{ sel }}</h3>
  <Dropdown
    :options="variations"
    :default="'Choose an option'"
    class="select"
    @input="getSelected"
  />
  
</div>

Answer 2

您可以 <"return this.product.attributes.variations"> 而不是 <"return this.product.attributes.variations.map(p => p.name)">。这样，Dropdown 组件内的 options 属性将是一个变体对象数组。然后，您可以像这样访问更多信息：option.name、option.description 等....

如何在Vue中显示选中值的信息

How to display selected value's information in Vue

javascript

drop-down-menu

vue.js

dropdown

vuejs2