Как отфильтровать массив в Vue.js с помощью нескольких кнопок выбора? - PullRequest
Новая
       2

Как отфильтровать массив в Vue.js с помощью нескольких кнопок выбора?

0 голосов
/ 02 апреля 2019

Я пытаюсь отфильтровать объект массива в Vue.js.есть коллекция продуктов в этом компоненте vue.Я хотел бы отфильтровать эту коллекцию с помощью кнопок выбора.Эти продукты являются пищевыми продуктами, и по умолчанию я хотел бы показать все продукты, но если я выберу кнопку без лактозы, я хотел бы показать, что только продукты не содержат лактозы.В моей базе данных эти параметры true или false.так, например, если у меня есть сыр без лактозы, то в базе данных у меня есть поле без лактозы со значением true.

Я попытался отфильтровать массив с вычисляемым свойством, но я не знаю, как это сделать.это. 

<div class="col-12 justify-content-between row filterbtn">
    <label class="btn btn-primary">
        <input v-model="selected" value="gluteinfree" type="checkbox"  class="check2">GLUTEIN FREE
    </label>

    <label class="btn btn-primary">
        <input v-model="selected" value="lactosefree" type="checkbox"  class="check2">LAKTOZ FREE
    </label>
</div>

<script>
    export default{
        data(){
            return{
                products: [ 
                    { "id": 1, "productName": "Majomkenyérfa kivonat", "gluteinfree": true,  "lactosefree": false, }, 
                    { "id": 2, "productName": "Kókuszolaj", "gluteinfree": false, "lactosefree": true,}, 
                    { "id": 3, "productName": "C-vitamin 80mg", "gluteinfree": true, "lactosefree": true, }, 
                ],
                selected: [],
            }   
        },

        computed: {
            //
        },
    }
</script>

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

1 Ответ

3 голосов
/ 02 апреля 2019

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

return this.products.filter(product => this.selected.every(selection => product[selection] === true));

обратите внимание, что он использует filter и every, что для старых браузеров может потребовать полифилов. Вы можете также преобразовать в более подробный цикл for.

Код: 

new Vue({
  el: '#app',
  data() {
    return {
      products: [{
          "id": 1,
          "productName": "Majomkenyérfa kivonat",
          "gluteinfree": true,
          "lactosefree": false,
        },
        {
          "id": 2,
          "productName": "Kókuszolaj",
          "gluteinfree": false,
          "lactosefree": true,
        },
        {
          "id": 3,
          "productName": "C-vitamin 80mg",
          "gluteinfree": true,
          "lactosefree": true,
        },
      ],
      selected: [],
    }
  },
  computed: {
    zsir() {
      return this.products.filter(prod => this.selected.every(sel => prod[sel] === true));
    },
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="col-12 justify-content-between row filterbtn">
    <label class="btn btn-primary">
  <input v-model="selected" value="gluteinfree" type="checkbox"  class="check2">GLUTEIN FREE</label>
    <label class="btn btn-primary"><input v-model="selected" value="lactosefree" type="checkbox"  class="check2">LAKTOZ FREE</label>
  </div>
  <ul>
    <li v-for="prod in zsir" :key="prod.id">{{prod.productName}}</li>
  </ul>
</div>
...