Create category and subcategory with VueJS Ionic Slides

Ionic Framework Ionic Vue
1

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

2

Cant help you with your error but you may want build this using hammer.js

Ion slides uses this under the hood and ion slides will be removed in newest version in favor of hammer

Hammer has solid docs too

1 Like
3

Thanks for the reply

You mean I should build sliders in vue js and add gestures with hammer js? Because as far as I know hammer js is for touch gestures right?

Also, because Ionic was using swiper js for slides, I’m thinking to create the slides with it. Would that be good to create slides with swiper js?

Thanks in advance

4

Sorry, u r right. Swiper.js

1 Like