让对象保持定义的顺序来排列

v-for循环中,当遍历对象时,一般都会自己给对象排序了,比如说属性的key是数字时:

js 复制代码
const a = {
  0: 'aaa',
  2: 'ccc',
  1: 'ddd'
}

当去循环它的时候,它就会自己给我们按照012排序了,但我们又不想让它自己给我们排序。

我就想它按 aaa bbb ddd 排序。不要给我按key的值去排序。

想了这种解决方法,结果不行,好像也没按照我定义的顺序来,(因为现代js不保证对象属性的顺序)。


下面就是将对象换成数组这种强制手动维护顺序

js 复制代码
<script setup>
import { ref, computed } from 'vue'

const msg = ref('Hello World!')
const obj = ref({
  0: 'aaa',
  2: 'bbb',
  1: 'ddd'
})
const objOrder = ref([0, 2, 1])

const orderedObj = computed(() => objOrder.value.map(key => (
  {
    key,
    value: obj.value[key]
  }
)))
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
  <div v-for="([key, value], index) in Object.entries(obj)" :key="index">{{ key }} - {{ value}}</div>

{{orderedObj }}
  <div v-for="item in orderedObj">
    {{ item.key }}: {{ item.value }}
  </div>
</template>

这种写法就行:

相关推荐
LuciferHuang2 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing3 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20153 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言3 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手4 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言4 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友5 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手6 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿6 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉