изменить вычисляемое свойство по клику - PullRequest
Новая
       51

изменить вычисляемое свойство по клику

0 голосов
/ 24 апреля 2020

Можно ли добавить / изменить вычисляемое свойство внутри «v-for» с событием щелчка. Я хотел бы иметь возможность отображать список продуктов на основе их категории, когда я нажимаю на соответствующую кнопку.

Если я нажму на кнопку "фрукты", это будет 

 <div v-for="food in fruitCategory" :key="food.name" class="card">
      <p>{{ food.name }}</p>
    </div>

и кнопка "конфеты" это будет 

 <div v-for="food in candyCategory" :key="food.name" class="card">
      <p>{{ food.name }}</p>
    </div>

Это хороший способ сделать это?

Действительный код ниже 

<template>
  <div class="layout">
    <button>all</button>
    <button>fruit</button>
    <button>candy</button>
    <div v-for="food in foods" :key="food.name" class="card">
      <p>{{ food.name }}</p>
    </div>
  </div>
</template>

export default {
  name: 'Food',
  data() {
    return {
      foods: [
        { name: 'banana', category: 'fruit' },
        { name: 'orange', category: 'fruit' },
        { name: 'strawberry', category: 'fruit' },
        { name: 'gum', category: 'candy' },
        { name: 'fuzzy peach', category: 'candy' },
      ]
    }
  },
  computed: {
    fruitCategory: function() {
      return this.foods.filter(function(food) {
        return food.category === 'fruit'
      })
    }
  },
  candyCategory: function() {
    return this.foods.filter(function(food) {
      return food.category === 'candy'
    })
  }
}

1 Ответ

1 голос
/ 25 апреля 2020

Вам просто нужно сохранить категорию в data, а затем вы можете использовать фильтр динамически.

здесь в качестве рабочего примера с массивом cat, который проверяет, включена ли категория. 

new Vue({
  el: "#app",
  name: 'Food',
  data() {
    return {
      cat: ['fruit','candy'],
      foods: [
        { name: 'banana', category: 'fruit' },
        { name: 'orange', category: 'fruit' },
        { name: 'strawberry', category: 'fruit' },
        { name: 'gum', category: 'candy' },
        { name: 'fuzzy peach', category: 'candy' },
      ]
    }
  },
  computed: {
    filtered: function() {
      var cat = this.cat;
      return this.foods.filter(function(food) {
        return cat.indexOf(food.category) >= 0;
      })
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>


<div id="app">
  <div class="layout">
    <button @click="cat=['fruit', 'candy']">all</button>
    <button @click="cat=['fruit']">fruit</button>
    <button @click="cat=['candy']">candy</button>
    <div v-for="food in filtered" :key="food.name" class="card">
      <p>{{ food.name }}</p>
    </div>
  </div>
</div>
...