使用vue.js

Question

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

但问题是vue.js的v-for函数随机显示内容。 在我的数据库中，内容按字段创建排序，并保持在此位置。 当我在this.statics中获取对象时，如果我在console.log中，我按字母顺序排列这些字段。但我不明白的是：当我用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
  })
},

this.statics（永不改变）的console.log：

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

Answer 1

对象的

v-for在迭代对象的键值对时不能保证顺序。因此，我建议的解决方法是：

使用computed属性对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}}

我只是用纯文本更改了模板，没有运行任何实际代码，但是它应该可以这样工作。