Блог

Я пытаюсь воссоздать нечто подобное с помощью ионных слайдов. В принципе, я хочу иметь подкатегорию, которая появляется только при выборе категории. Очевидно, что подкатегория должна показывать соответствующие данные, которые были присвоены ее названию. Однако, когда я нажимаю на слайды, ничего не происходит.

Я использую Ionic 5 Vue JS.

Это слайд моей категории

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

И это подкатегория

 <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  ) {
        if (this.categories[i].name === this.subcatName) {
         console.log("TRUE")
        }
      }

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

Update

I have edited subcatSetup() as following

  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);
        }
      }
    },
 

Теперь, когда я нажимаю категорию «А», я могу видеть ее подкатегории. Но «B» не работает, он показывает подкатегории «A».