Случайный порядок отображения в v-for с vue.js

Question

Я использую MongoDB и vue.js для отображения содержимого из моей базы данных, содержимое возвращается как объект с несколькими свойствами, содержащими другие объекты.

Но проблема в том, что v-for Функция vue.js случайным образом отображает содержимое. В моей БД контент сортируется по созданию поля и остается в этой позиции. Когда я получу объект в this.staticsЕсли я утешаю это, у меня есть эти поля по алфавиту. Но то, что я не понимаю, это: когда я показываю это с 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 для this.statics (который никогда не изменится):

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

Answer 1

v-for for 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}}

Я просто изменил ваш шаблон в виде обычного текста без реального выполнения кода, однако он должен работать таким образом.