首页 文章

如何在Vue模板中对对象中的数据进行排序？

提问于
浏览 次
0

我正在使用Firebase . 数据存储为具有唯一键的对象 .

我想保留这些密钥以进行更新 .

但是，当我在Vue-templates中呈现数据时，我还想将数据排序为数组 .

数据如下：

topics:
  - [firebase-push-key]
    - title
    - text
    - ...

我想在我的模板中对它进行排序，如：

<template v-for="topic in $store.state.forum.topics">
  ...
</template>

$store.state.forum.topics 应按值 title 排序 .

编辑：

这个Vuex变异完成了这项工作：

retrieveTopics(state) {
  topics.on('value', (snapshot) => {
    const object = snapshot.val()
    var array = Object.keys(object).map((key) => {
      return { [key]: object[key] }
    })
    state.forum.topics = array
  })
}

但是，如何在vue模板中迭代生成的数组？

这是数据结构：

[ { "-Kmbspn0WYBlNXfmfVlR": { "slug": "arne", "title": "Arne" } }, { "-KmbsqiG_9uXzRhHrnXZ": { "slug": "tati", "title": "Tati" } }, { "-KmbsrllgJzV7BA_NeCO": { "slug": "abel", "title": "Abel" } } ]
vue.js

1 回答

  • 2

    像这样的东西 . 在这里，我显然没有使用Vuex，但你可以使用Vuex getter . 如果您需要排序对象中的主题 id ，则可以将其添加到 Map 中 .

    console.clear()

// topics:
//   - [firebase-push-key]
//     - title
//     - text
//     - ...
  
const topics = {
  "1234":{
    title: "Ziss one starts with Z",
    text: "text1"
  },
  "2345":{
    title: "M is for middle",
    text: "text2"
  },
  "3456":{
    title: "Alpha title",
    text: "text3"
  }
}

new Vue({
  el:"#app",
  data:{
    topics
  },
  methods:{
    sortProperty(prop){
      return (a,b) => {
        if (a[prop] < b[prop])
          return -1;
        if (a[prop] > b[prop])
          return 1;
        return 0;       
      }
    }
  },
  computed:{
    sortedTopics(){
      return Object.keys(this.topics)
        .map(t => {
          this.$set(this.topics[t], 'key', t)
          return this.topics[t]
        })
        .sort(this.sortProperty('title'))
    }
  }
})

    <script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <div v-for="topic in sortedTopics">
    {{topic}}
  </div>
</div>

    Edit

    这是一个处理更新数据结构的示例 .

    const topics = [{
  "-Kmbspn0WYBlNXfmfVlR": {
    "slug": "arne",
    "title": "Arne"
  }
}, {
  "-KmbsqiG_9uXzRhHrnXZ": {
    "slug": "tati",
    "title": "Tati"
  }
}, {
  "-KmbsrllgJzV7BA_NeCO": {
    "slug": "abel",
    "title": "Abel"
  }
}]

new Vue({
  el: "#app",
  data: {
    topics
  },
  methods: {
    sortByObjectProperty(prop, getter) {
      return (a, b) => {
        a = getter(a), b = getter(b)
        if (a[prop] < b[prop])
          return -1;
        if (a[prop] > b[prop])
          return 1;
        return 0;
      }
    }
  },
  computed: {
    sortedTopics() {
      const getter = v => v[Object.keys(v)[0]]
      const sorter = this.sortByObjectProperty("title", getter)
      return this.topics.sort(sorter)
    }
  }
})

    <script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <div v-for="topic in sortedTopics">
    {{topic}}
  </div>
</div>

    在此代码中（如上面的代码所示）， sortByObjectProperty 是一个排序函数生成器 . 您传递任何属性名称，它将为具有该属性的对象生成排序函数 . 为了处理你在 topics 中的数据结构，我添加了一个 getter 参数，这个函数可以用来告诉分拣机如何获得它需要排序的对象 .

    我最初担心的是 v[Object.keys(v)[0]] 的表现，但这似乎至少在我自己的满意度中得到了解决 .

    如果您不必支持IE，或者您正在使用编译为支持它的javascript，则还可以在不需要按嵌套对象排序的情况下为 getter 参数定义默认值 .

    sortByObjectProperty(prop, getter = g => g) {...}

    你可以用它作为

    const sorter = this.sortByObjectProperty("someProperty")
    回复于

相关问题