时间戳

首页 > 解决方案 > 如何对具有观察值的多个对象进行排序？Vue

javascript - 如何对具有观察值的多个对象进行排序？Vue

问题描述

我在其中创建了一个select元素，HTML并希望为用户创建一个选项，以通过选择元素选项对表格进行排序values。

我要排序的data（会有很多对象）：

在此处输入图像描述

我正在观看具有排序 v-model 值的选择元素：

  watch: {
  search: function (val) {
    if (val.length === 0) return this.filtered = this.affiliates;

    this.filtered = this.affiliates.filter(function (cont) {
      return cont.shop_name.toLowerCase().indexOf(val.toLowerCase()) >= 0 || cont.app_name.toLowerCase().indexOf(val.toLowerCase()) >= 0;
    });
  },
  sort: function (val) {
    console.log(this.filtered);
  },

我如何objects按观看值排序？

数据存储在this.filtered

我想按这些值排序：

 <select v-model="sort">
          <option value="date_installed">Latest</option>
          <option value="status">Status</option>
          <option value="share">Share</option>
        </select>

标签： javascriptvue.jsvuejs2watch

解决方案

虽然您可以使其与 a 一起使用watch，但这似乎更适合computed

排序函数将比较函数作为参数，您可以根据排序偏好动态比较对象，方法是使用访问器的括号表示法将其作为键传递。

<template>
    <div>
        <select v-model="sortBy">
            <option value="date_installed">Latest</option>
            <option value="status">Status</option>
            <option value="share">Share</option>
        </select>
        <ul>
            <li v-for="item in filtered" :key="item.id">{{ item.app_name}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            sortBy: [],
            affiliates: [
                //...
            ]
        }
    },
    computed: {
        filtered() {
            if (val.length === 0) return this.affiliates;
            return this.affiliates.sort( (a,b) => {
                return a[this.sortBy] - b[this.sortBy]
            });
        }
    },
}
</script>

推荐阅读