vuejs v-仅针对数组中的几个元素，基于类别

Question

我得到了一个元素数组，我在页面上显示，使用 v-for：

<template>
  <v-container>
     <v-layout  row wrap v-for="offer in offers.slice((current_page-1)*5, current_page*5)">
        ...
    </v-layout>
  <v-container>
</template>

<script>
   export default{
      data(){
        offers: [array of offers here],
      }
   }

现在我决定添加类别并仅显示数组中某些类别的报价（数据类似于：offer.speciality[1] - 类别 1;优惠专业[2] - 类别 2 等...

所以我添加了最简单的v-Show元素，如下所示：

<v-layout  row wrap v-for="offer in offers.slice((current_page-1)*5, current_page*5)" 
v-show="checkArray(offer, speciality)">

和特殊变量（从选择中获取值）

<script>
   export default{
      data(){
        offers: [array of offers here],
        speciality:''
      }
   }

其中函数 checkArray 只是检查 specialityID 是否与 offer.speciality[i] 相同，并向 v-show 元素返回 true 或 false

    checkArray(offer, id){
        if (id)
        {
            for (var i in offer.specialities) {
                if (offer.specialities[i] == id)
                {
                  return true;
                  break;
                } 
            }
            return false;
        }
        else {
            return true;
        }
    },

一切正常，但是在这一点上，正如我们所知，v-show函数显示了一些报价，而隐藏了其余的报价，没有从DOM中删除它们，这使得分页(每页五个报价)无法配置，例如

显示特色优惠 1 -

offer.speciality[1]
offer.speciality[1]
offer.speciality[2] (display:none;)
offer.speciality[3] (display:none;)
offer.speciality[] (display:none;)
Pagination (1) 2 3 4 ...

那么我应该选择什么方法来代替 od v-show 来完成这项工作呢？我应该删除 v-show=“” 并在 v-for 中制作某种条件吗？如何使这个动态，而 v-for 是懒惰的，我正在从选择中触发特殊变量的变化？

Answer 1

我认为你应该对过滤的汽车使用计算属性，这里有一个例子

new Vue({
	el:"#app",
  data:{
  	manufacturer:'',
    cars: [
    				{manufacturer:"toyota", model:2012},
            {manufacturer:"ford", model:2013},
            {manufacturer:"subaro", model:2010},
            {manufacturer:"ford", model:2014},
            {manufacturer:"subaro", model:2010},
            {manufacturer:"ford", model:2016},
            {manufacturer:"dodge", model:2014},
            {manufacturer:"ford", model:2015},
            {manufacturer:"ford", model:2014}
            
          ],
    current_page:1
  },
  computed:{
  	filteredCars: function(){
    	var cars = []
    	if(this.manufacturer == ''){
      	cars = this.cars
      }
      else
      {
        cars = this.cars.filter(car => {
          if (car.manufacturer == this.manufacturer){
            return true
          }
          return false
        })
      }
      return cars.slice((this.current_page-1)*3, this.current_page*3)
    }
  }

})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script>
<div id="app">
  <label for="">Type manufacturer</label>
  <input type="text" v-model="manufacturer">
  <hr>
  <ul>
    <li v-for="car in filteredCars">{{car.manufacturer}} | {{car.model}}</li>
  </ul>
  
  <hr>
  <label for="">Page</label>
  <input type="number" v-model.number="current_page">
</div>