如何在Vue的计算属性中过滤分块数组？

Question

我从计算属性中提取了一堆数据，我想通过搜索输入使其在name中可过滤。

数据如下（来自vue devtools）：

chunkedAirlines: Array[6]
    0: Array[6]
      0: Object
        id: 1
        name: "Lorem ipsum 1"
      1: Object
        id: 2
        name: "Lorem ipsum 2"
      ...

    1: Array[6]
      0: Object
        id: 3
        name: "Lorem ipsum 3"
      1: Object
        id: 4
        name: "Lorem ipsum 4"
      ...

我已经尝试过this question的解决方案，但仍然无法按照我的要求工作。 chunkedAirlines中的值不会在按键时更新。

这是我的代码：

<template>
    <div class="container-fluid">
        <div class="row mb-3">
            <div class="col-md-4">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <div class="input-group-text bg-white text-muted">
                            <i class="fas fa-search"></i>
                        </div>
                    </div>
                    <input
                        type="text"
                        id="search-input"
                        class="form-control border-left-0"
                        placeholder="Find airline..."
                        aria-label="Airline"
                        aria-describedby="search-airline-button"
                        v-model="search"
                        @keyup="findAirline">
                </div>
            </div>
            <div class="col-md-8">
                <a href="#" class="btn btn-success float-right mr-4">
                    <span class="fas fa-plus-circle mr-1"></span>
                    New Airline
                </a>
            </div>
        </div>
        <div 
            class="row"
            v-for="airlines in chunkedAirlines"
            :key="airlines.key">
            <div
                class="col-md-4"
                v-for="airline in airlines"
                :key="airline.id">
                <a
                    :href="'/airlines/' + airline.slug"
                    class="card airline-card shadow-sm">
                    <div class="card-body">
                        <img :src="airline.icon" :alt="airline.name + ' icon'" height="100" class="rounded">
                        <p class="font-weight-bold text-capitalize mb-0 mt-3">{{ airline.name }}</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            airlines: [],
            search: "",
        }
    },
    computed: {
        chunkedAirlines() {
            return _.chunk(this.airlines.data, 6)
        },
        findAirline() {
            return this.chunkedAirlines.filter(items => {
                return items.filter((airline) => {
                    return airline.name.toLowerCase().includes(this.search.toLowerCase())
                })
            })
        }
    },
    mounted() {
        axios.get('/api/airlines')
        .then(response => {
            this.airlines = response.data
        })
    }
}
</script>

Answer 1

您做错了。

这是一个可行的示例：

<template>
    <div class="container-fluid">
        <div class="row mb-3">
            <div class="col-md-4">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <div class="input-group-text bg-white text-muted">
                            <i class="fas fa-search"></i>
                        </div>
                    </div>
                    <input
                        type="text"
                        id="search-input"
                        class="form-control border-left-0"
                        placeholder="Find airline..."
                        aria-label="Airline"
                        aria-describedby="search-airline-button"
                        v-model="search">
                </div>
            </div>
            <div class="col-md-8">
                <a href="#" class="btn btn-success float-right mr-4">
                    <span class="fas fa-plus-circle mr-1"></span>
                    New Airline
                </a>
            </div>
        </div>
        <div 
            class="row"
            v-for="airlines in chunkedAirlines"
            :key="airlines.key">
            <div
                class="col-md-4"
                v-for="airline in airlines"
                :key="airline.id">
                <a
                    :href="'/airlines/' + airline.slug"
                    class="card airline-card shadow-sm">
                    <div class="card-body">
                        <img :src="airline.icon" :alt="airline.name + ' icon'" height="100" class="rounded">
                        <p class="font-weight-bold text-capitalize mb-0 mt-3">{{ airline.name }}</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            airlines: [],
            search: "",
        }
    },
    computed: {
        chunkedAirlines() {
            if (this.search && this.search.length > 0) {
              return _.chunk(this.airlines.data, 6).filter(items => {
                  return items.filter((airline) => {
                      return airline.name.toLowerCase().includes(this.search.toLowerCase())
                  })
              })
            } else {
                return _.chunk(this.airlines.data, 6)
            }
        }
    },
    mounted() {
        axios.get('/api/airlines')
        .then(response => {
            this.airlines = response.data
        })
    }
}
</script>

这样，您只需将搜索输入绑定到数据对象中的搜索变量，然后如果用户搜索某些内容并显示过滤后的数据，或者如果没有搜索可正常返回项目，则计算的属性将更新。

希望这会有所帮助。