#vue.js #vuejs2 #drop-down-menu #vue-component #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"
}
]
},
Как вы видите, я отображаю варианты этого объекта в своем раскрывающемся списке. Чего я пытаюсь достичь, так это в соответствии с выбранным значением, которое я хочу поместить в объект некоторую информацию (например, эту информацию: {
«идентификатор»: 1,
«product_template_id»: «1»,
«имя»: «детский билет»,
«описание»: «только для детей!»,
«price_excl_vat»: 1,
«created_at»: «2021-09-15T13:16:00.000000 Z»,от
«updated_at»: «2021-09-15T13:16:00.000000 Z»для
},)
Для этого у меня есть выпадающий компонент:
<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. Не могли бы вы, пожалуйста, взглянуть?
Спасибо…
Комментарии:
1. Эй, приятель, куда ты хочешь засунуть этот предмет? В родительском
selectedObjectили новом?2. Эй, я хочу заполнить выбранный объект
Ответ №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> Комментарии:
1. Большое вам спасибо за вашу помощь. Но когда я изменяю выбранное значение, объект не меняется.
2. Проверьте мой фрагмент, пожалуйста, он меняется 🙂