How to displayed fethced data in dropdown in Vue-CodePudding

I am fetching data from API and I want to show it on the dropdown.

"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"
          }
        ]
      },
    }
]

So, I want to display variations' names in my dropdown. And later according to the selected value, I want to show the variations' price. Here is my dropdown:

<Dropdown
  :options="[product.attributes.variations.name]"
  :default="'Choose an option'"
  class="select"
/>

And here is my dropdown component:

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

Currently, the dropdown is empty. I tried to put it inside of for but it didn't help also. Could you please have a look? Thanks

CodePudding user response：

Try to map variations in computed :

Vue.component('Dropdown', {
  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>
  `,
   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"
                }
              ]
            },
          }
        
    }
  },
  computed: {
    variations() {
      return this.data.attributes.variations.map(m => m.name)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<Dropdown
  :options="variations"
  :default="'Choose an option'"
  class="select"
/>
</div>