Vue.js / Creating all selected buttons does not work

Question

I would like to create buttons that can select all options when clicking either size or color. However, even the buttons don't show up. What is the problem?

I tried many things, but did not work. Can you tell me the issue?

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

Answer 1

I found out the reason why. I did not put return result; in getComboOptions() !!