尝试使用 VueJS 过滤数组并仅显示结果答案

【问题标题】：Trying to filter an array using VueJS and showing only the results尝试使用 VueJS 过滤数组并仅显示结果
【发布时间】：2020-08-05 23:06:44
【问题描述】：

我在 json 上有一个汽车数组，该数组包含汽车的型号、年份、品牌、图像和描述，当我启动页面时，数组总是使用 v-for 加载，我正在尝试添加一种按制造年份过滤汽车的方法，在用户按下按钮后，我尝试使用 v-model:search 但我不太清楚，我还没有在网上找到任何类似的教程到那个

<div v-for="car in cars"</div>

这设置了汽车 forEach 循环，例如，在用户在表单上选择它并单击按钮后，我怎样才能使其仅显示 2018 年制造的汽车？

【问题讨论】：

标签： javascript html arrays vue.js

【解决方案1】：

如果您希望保留 cars 数组而不进行修改并将其过滤到内存中，则可以使用计算属性。

<div v-for="car in filteredCars"</div>
...
<script>
...
export default {
...
  data () {
    return {
      cars: [],
...
computed: {
  filteredCars () {
    // a simple filter by indexOf, for demonstrating purposes only
    return this.cars.filter(x => x.description.indexOf(this.search) !== -1)
  }
}

【讨论】：

【解决方案2】：

您可以使用 javascript es6 中的 sort 方法来做到这一点

const activities = [
  { model: 'Toyota', date: new Date('2019-06-28'), year: 2009},
  { model: 'Benz', date: new Date('2019-06-10'), year: 2009 },
  { model: 'Ford', date: new Date('2019-06-22'), year: 2009 }
]

const sortedActivities = activities.sort((a, b) => b.date - a.date)

console.log(sortedActivities)

【讨论】：

【解决方案3】：

您可以使用 lodash 轻松过滤它

<script>
import _ from 'lodash'

...
export default {
...
    data () {
        return {
            cars: [],
        }
    }
...
    methods: {   
        onFilter: function(filterKey = 'year') {
            this.cars = _.orderBy(
                this.cars, (car) => {
                    return car[year]
                },
                'desc'
            )
        }
    }
}

现在您要做的就是将此 onFilter() 方法与您的按钮事件绑定

【讨论】：