I'm having trouble creating buttons that can select all options when clicking on either size or color. The buttons aren't showing up at all. Can someone help me identify the issue?
I've attempted various solutions but none seem to work. Any insights into what might be going wrong?
<template>
<div v-if="iProduct.active == 1">
<div v-for="value in iProduct.variants[0].option_values" :key="value.id">
<span v-if="value.option.name == 'color'">All Color</span>
<span v-else>All Size</span>
<q-btn
v-for="(option, index) in getComboOptions(value.option.name, iProduct.variants)"
:key="index"
size="md"
@click="addVariantsByOptionName(option, iProduct.variants)"
>
{{option}}
{{value.option.name}}
</q-btn>
</div>
</div>
</template>
This is the script part
methods: {
variantSelected(variant) {
this.$emit('variantSelected', variant);
},
getComboOptions(name, variants) {
let result = [];
if (variants == undefined) return result;
//if (variants < 0) return result;
for (let variant of variants) {
for (let optionValue of variant.option_values) {
if (optionValue.option.name == name) {
console.log('--- optionValue.value : ' + optionValue.value);
let dup = 0;
for (let r of result) if (r == optionValue.value) dup++;
if (dup == 0) result.push(optionValue.value);
}
}
}
},
addVariantsByOptionName(optionName, variants) {
console.log('--- variants : ' + variants);
for (let variant of variants) {
for (let optionValue of variant.option_values) {
if (optionName == optionValue.value) {
this.variantSelected(variant);
}
}
}
},
}
Thank you!