3

我正在使用 MongoDB 和 vue.js 来显示我的数据库中的内容，该内容作为一个对象返回，该对象具有多个包含其他对象的属性。

但问题是v-forvue.js 的功能是随机显示内容。在我的数据库中，内容按字段创建排序，并保持在这个位置。当我得到对象时this.statics，如果我 console.log 它，我有这些字段按字母排序。但我不明白的是：当我用 a 显示它时，v-for它们永远不会以相同的顺序出现。

这是我的Vue代码：

h3 Static elements
.content-wrap(v-if="Object.keys(statics).length > 0")
  .menu-admin
    .btn(v-for="(content, key) in statics" @click="activeStatic = key") {{key}}
  .content(v-for="(content, key) in statics" v-if="key === activeStatic")
    h3 {{key}}
    .line
    .wrap(v-for="(item, keys) in content")
      h4 {{keys}}

问题是在哪里keys。

这是我返回对象的函数：

getStatics(statics) {
  Promise.all(Object.keys(statics).map((key) => {
    return PartsService.fetchDataWrap({
      id: statics[key]
    }).then((res) => {
      statics[key] = res.data.values
    })
  })).then(() => {
    this.statics = statics
  })
},

console.log for this.statics（谁从不改变）：

{__ob__: Observer}
  my static bloc: Object
    image1: (...)
    image2: (...)
    text1: (...)
    text2: (...)
4

1 回答 1

0

v-forfor object 在迭代对象的键值对时不保证顺序。所以我建议的解决方法是：

使用计算属性对Object.keys(statics)数组进行排序，例如sortedStaticsKeys，然后使用排序后的键数组进行迭代。

然后模板将类似于：

h3 Static elements
.content-wrap(v-if="sortedStaticsKeys.length > 0")
  .menu-admin
    .btn(v-for="key in sortedStaticsKeys" @click="activeStatic = key") {{key}}
  .content(v-for="key in sortedStaticsKeys" v-if="key === activeStatic")
    h3 {{key}}
    .line
    .wrap(v-for="(item, keys) in content")
      h4 {{keys}}

我只是用纯文本更改了您的模板，没有运行实际代码，但是它应该以这种方式工作。

于 2018-09-12T09:22:13.473 回答