Как отфильтровать список товаров с помощью v-btn в vuetify? - PullRequest
Новая
       12

Как отфильтровать список товаров с помощью v-btn в vuetify?

0 голосов
/ 25 февраля 2020

В настоящее время я пытаюсь отфильтровать список объектов с помощью кнопок.

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

Спасибо за помощь! 

        <v-row class="my-4">
          <v-btn
          v-for="category in categories"
          text
          class="underline"
          route :to="category.route"
          @click="category.function"
          >{{ category.text }}</v-btn>

        </v-row>
        <v-row 
        justify="start">
          <v-card
          v-for="product in products"
          :key="product.name"
          class="ma-3 text-center">
          <v-img
          :src="product.src"
          class="mc mt-2"
          >
          </v-img>
          <v-card-title
          class="bold justify-center">
            <h4>{{ product.name }}</h4>
          </v-card-title>
          </v-card>
        </v-row>

categories: [
                { text: 'All', function: "all()" },
                { text: 'Fruits & Veggies', function: "fruitsVeggies()"  },
                { text: 'Baking', function: "baking"  },
                { text: 'Gadgets', function: "gadgets"  },
                { text: 'Cutting Boards', function: "cuttingBoards"}],  


products: [{...}, {...}, etc]


computed: {
      all() {
        return this.products.filter(product => {
          return product
        })
      },
      fruitsVeggies() {
        return this.products.filter(product => {
          return product.category === 'Fruits & Veggies'
        })
      },
      baking() {
        return this.products.filter(product => {
          return product.category === 'Baking'
        })
      },
      cuttingBoards() {
        return this.products.filter(product => {
          return product.category === 'Cutting Boards'
        })
      }

1 Ответ

0 голосов
/ 25 февраля 2020

Vue вычисленные свойства возвращают динамическое значение c значение
Когда вы вызываете baking как функцию, она должна выдать ошибку в консоли; это не функция, а свойство

Вместо этого вы можете определить вычисляемое свойство с именем filteredProducts, которое меняет фильтр на основе чего-то, хранящегося в данных, и l oop вместо этого вместо 

data() {
  productFilter: "all"
}

computed: {
  // your computed values
  filteredProducts() {
    if (this.productFilter === "all") {
      return this.all;
    }
    // etc. For all filters
  }
}

Тогда в вашем шаблоне: 

<v-row 
  justify="start"
>
  <v-card
  v-for="product in filteredProducts"
...