Create category and subcategory with VueJS Ionic Slides

I’m trying to recreate something similar to this with ionic slides. Basically, I want to have a subcategory that only appears when category is chosen. Obviously, subcategory should show the appropriate data that was assigned to its name. However, when I click “A” category, I’m able to see its subcategories. But “B” isn’t working, it shows the subcategories of “A”.

I’m using Ionic 5 Vue JS.

This is my category slide

<ion-slides
          style="padding: 0px; margin: 0px; padding-bottom: 10%"
          pager="true"
          :options="slideOpts"
          id="categories"
          name="categories"
          :value="subcatName"
          v-model="subcatName"
          @click="subcatSetup"
        >
          <ion-slide
            style="padding: 0px; margin: 0px"
            v-for="category in categories"
            :value="category.name"
            :key="category.name"
            v-model="subcatName"
            v-on:change="subcatSetup"
          >
            <div class="item">
              <ion-card class="card-size">
                <ion-card-content class="card-content">
                  <img
                    :src="'/assets/images/' + category.icon"
                    style="height: 70%; width: 70%; padding: 5%; margin: auto"
                /></ion-card-content>
              </ion-card>
              <span class="caption"> {{ category.name }}</span>
            </div>
          </ion-slide>
        </ion-slides>
      </div>

And this is the subcategory

<div v-if="subcatName" style="padding: 0px; margin: 0px">
        <ion-label style="padding: 5%;">Sub Category</ion-label>

        <ion-slides
          style="padding: 0px; margin: 0px; padding-bottom: 10%"
          pager="true"
          :options="slideOpts"
          id="subcats"
          name="subcats"
          v-model="subcat"
        >
          <ion-slide
            style="padding: 0px; margin: 0px"
            v-for="subcat in subcats"
            :value="subcat"
            :key="subcat"
          >
            <div class="item">
              <ion-card class="card-size">
                <ion-card-content class="card-content">
                  <img
                    :src="'/assets/images/'"
                    style="height: 70%; width: 70%; padding: 5%; margin: auto"
                /></ion-card-content>
              </ion-card>
              <span class="caption">{{ subcat }}</span>
            </div>
          </ion-slide>
        </ion-slides>
      </div>

 subcatSetup() {
      for (var i = 0; i < this.categories.length; i++) {
        this.subcatName = this.categories[i].name;

        if (this.subcatName === "A") {
          return (this.subcats = this.A);
        } else if (this.subcatName === "B") {
          return (this.subcats = this.B);
        }
      }
    },

I’m pretty sure I’m doing something wrong in subcatSetup

3 posts - 2 participants

Read full topic