Я хочу показать отфильтрованные продукты в Vue Js на основе выбора, сделанного пользователем в 3 различных параметрах из всех продуктов - PullRequest
Новая
       5

Я хочу показать отфильтрованные продукты в Vue Js на основе выбора, сделанного пользователем в 3 различных параметрах из всех продуктов

0 голосов
/ 06 января 2020

Это шаг 1, который появится, и пользователь выберет одну категорию из этого 

    <div class="w-100 text-center step-div py-5">

    <h3>step 1 </h3>
    <p class="step-p"> for Men, Women or Unisex</p>

<div class="container">
    <div id="categorytype" class="responsive">

      <div v-for="(type,typeIndex) in types" class="filter-slider-div col-4 p-5" @click= "addfiltertype(typeIndex,type.typeslug)"> 
        <img :src="type.typeImage" class="filter-img mx-auto">
          <p>{{type.typename}}</p>
        </div>

    </div>
    </div>
</div>

На выходе будет что-то похожее на мужчин, женщин, обоих, детей и т. Д. c & При нажатии «Сохранить» слизняк этого типа. который я поделюсь ниже, 

    <h3>step 2 </h3>
    <p class="step-p">Select your case size</p>

<div class="container">
    <div id="categorydials" class="responsive">

      <div v-for="(dial,dialIndex) in dials" class="filter-slider-div col-4 p-5" @click= "addfilterdial(dialIndex,dial.dialname)"> 

          <img :src="dial.dialimage" class="filter-img mx-auto">
          <p>{{dial.dialname}}mm</p>
        </div>

    </div>

    </div>

На шаге 2 пользователь выберет размер, он может быть любым, 

    <h3>step 3 </h3>
    <p class="step-p">Select your case colour</p>

<div class="container">
    <div id="categorycolors" class="responsive">

      <div v-for="(color,colorIndex) in colors" class="filter-slider-div p-5" @click= "addfiltercolor(colorIndex,color.colorslug)"> 

          <img :src="color.colorimage" class="filter-img mx-auto">
          <p>{{color.colorname}}</p>
      </div>
    </div>

    </div>

На шаге 3 пользователь выберет цвет

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

var filters = new Vue ({

el: '#categorytype',
data:{
    types: [
        {

            typeId: 1,
            typename: 'Men',
            typeImage: 'assets/images/filter1.png',
            typeslug: 'men',

        },
          {
            typeId: 2,
            typename: 'Women',
            typeImage: 'assets/images/filter2.png',
            typeslug: 'women',
        },
          {

            typeId: 3,
            typename: 'Watches',
            typeImage: 'assets/images/filter3.png',
            typeslug: 'both',
        }


    ] },
    methods: {
    addfiltertype (typeIndex,typeslug) {
        this.typeslugFilter = typeslug;
       // alert(this.typeslugFilter+ '+' + typeslug);
    }
}
});

Рассмотрим аналогичный код для двух других категорий с переменной dialnameFilter & colorslugFilter,

Теперь я могу выбрать отфильтрованные продукты, используя приведенный ниже код, это не так На данный момент у меня работает

Я получаю свои продукты из файла json, и они работают нормально. Я использую тип_слуги и имя для набора номера в качестве типа категории в деталях одного продукта и использую productslider в качестве элемента el: *. 1019 * 

<div id="productslider" class="container py-5">
        <p>{{typeslugFilter}}</p>
<div v-for="(variant,variantIndex) in variants" v-if="typeslugFilter === typeslug && dialnameFilter === dialname">
      <div class="watch-slider-div">  
<img :src="variant.variantImage"  class="w-100 py-3">

    </div>
    </div>
    </div>

Пожалуйста, помогите мне в этом. Если любой технический специалист будет признателен за помощь

...