Question

我在json上有一系列汽车，该阵列具有汽车的型号，年份，品牌，图像和描述，当我启动页面时，该阵列始终使用v-for加载，我尝试添加一种按制造年份对汽车进行过滤的方法，在用户按下按钮后，我尝试使用v-model：search，但我不太清楚，也没有在网上找到任何类似的教程对此

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

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

Answer 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)
  }
}

Answer 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)

Answer 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（）方法与按钮事件绑定

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

3 个答案: