Vue.js Vuejs 通过数据键迭代复杂对象

const article = reactive({
  code: 'code',
  specs: {
    type: { text: 'description type', value:'mytype'} ,
    prop1: { text: 'description prop1', value: 'myprop1' },        
    prop2: { text: 'description prop1', value: 'myprop1' },                
  },
  dimensions: { base: 10, height: 20}
})

<li v-for="(value, propertyName, index) in article.specs">
  {{ propertyName }}:  {{ value }} ({{ index }})
</li>   

type: { "text": "description type", "value": "mytype" } (0)
prop1: { "text": "description prop1", "value": "myprop1" } (1)
prop2: { "text": "description prop1", "value": "myprop1" } (2)

type: description type
prop1: description prop1
prop2: description prop1

  {{ propertyName }}:  {{ value[text] }}  ({{ index }})

type: (0)
prop1: (1)
prop2: (2)

    const article_specs = computed(() => {
      let result = '';
      Object.keys(article.specs).forEach((item) => {
    
        result +=  article.specs[item].value + 'todo'
        console.log("item", article.specs[item])
    
      })

  return result;
})

{{article_specs}}

Vue.js相关问答推荐

在VITE-VUE APP-DEV模式上重定向HTTP请求

如何 for each 动态创建的按钮/文本字段设置唯一变量？

VueJS中的绑定函数含义

Nuxt.js 中的开发工具样式编辑问题

在 vuejs 中显示两个组件，但只显示一个，为什么？

Vue index.html favicon 问题

Vue动态mapGetters

无法在 Vuex 中的其他操作中反跳操作

Vue.js 中的 mount挂载是什么意思？

Vue：需要禁用页面上的所有输入

一个 div 组件中的 Vue.js 2.0 路由链接

使用 aria-live 在 vue.js 中向屏幕阅读器宣布信息

Vue-Router 抽象父路由

错误：您可能需要额外的加载器来处理这些加载器的结果.

错误：vue-loader 要求 @vue/compiler-sfc 存在于依赖树中

此 set-cookie 已被阻止，因为它具有 samesite=lax

Vuetify v-btn 路由活动类问题

Vue 组件中的组件渲染函数中可能存在无限更新循环警告

基本 vue.js 2 和 vue-resource http 获取变量赋值

vuex - 即使不推荐，是否可以直接更改状态？