Vue中如何使用下拉列表的选定值填充对象

Question

我有一个dropdown，如图所示：

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

如您所见，我正在 dropdown 中显示此对象的变体。我想要实现的是根据我想将一些信息放入对象的选定值（例如 this

info: {
      "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"
    },

)

为此我有一个下拉组件：

<template>
    <div class="custom-select" :tabindex="tabindex" @blur="open = false">
        <div class="selected" :class="{ open: open }" @click="open = !open">
            {{ selected.name }}
        </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 }}
            </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,
            sel: '',
        };
    },
    mounted() {
        this.$emit("input", this.selected);
    },
    computed: {
        variations() {
            return this.data.attributes.variations
        }
    },
    methods: {
        getSelected(opt) {
            this.sel = opt.description
        }
    }
};
</script>

以及这个组件的父级，我正在尝试填充对象：

<Dropdown
                            :options="getVariations"
                            :default="'Choose an option'"
                            class="select"
                            @input="getSelected"
                        />
<script>
data() {
        return {
            selectedObject: "",
        };
    },
    computed: {
        getVariations() {
            return this.product.attributes.variations;
        },
        getSelected(opt) {
            this.selectedObject= opt;
        }
    },
</script>

但不幸的是，我没有从 selectedObject 那里得到任何东西。你能看看吗？

谢谢...

Answer 1

您从下拉组件发出选定的项目数据，因此在方法中设置您的对象：

getSelected(opt) {
  this.selectedObject = opt

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: '',
          selectedObject: null
        
    }
  },
  computed: {
    variations() {
      return this.data.attributes.variations
    }
  },
  methods: {
    getSelected(opt) {
      this.selectedObject = 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>selected object</h3>
  <p>{{ selectedObject }}</p>
  <Dropdown
    :options="variations"
    :default="'Choose an option'"
    class="select"
    @input="getSelected"
  />
  
</div>

Vue中如何使用下拉列表的选定值填充对象

How to fill object with the selected value of dropdown in Vue

drop-down-menu

vue.js

dropdown

vue-component

vuejs2