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

Question

我正在使用 Vue.js 3 构建一个简单的文章配置器。

让我们定义一个复杂的对象：

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)

Answer 1

如果您想使用括号

[]

访问属性名称，请在括号内使用字符串

["text"]

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

Answer 2

解决方案#1

可以通过名称调用对象的prop。

value.text

// or

value["text"]

可以通过动态变量调用对象的属性。

const name = "text"
value[name]

解决方案#2

可以使用for循环。

<span v-for="propValue of value">{{ propValue }}</span>

示例

const { createApp, reactive } = Vue

const app = createApp({
  setup() {
    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}
    })

    return { article }
  }
}).mount('#app')

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app">
  <h2>Your code</h2>
  <ul>
    <li v-for="(value, propertyName, index) in article.specs">
      {{ propertyName }}:  {{ value }} ({{ index }})
    </li>
  </ul>
  
  <h2>Solution # 1</h2>
  <ul>
    <li v-for="(value, propertyName, index) in article.specs">
      <div style="display: flex; gap: 8px;">
        <span>{{ propertyName }}:</span>
        
        <!-- can use object.name or object[name] formats -->
        <!-- can add dynamically name if use object[name] format -->
        <span>{{ value.text }}</span> <!-- or value["text"] -->
        <span>{{ value["value"] }}</span> <!-- or value.value -->
        
        <span>{{ index }}</span>
    </li>
  </ul>
  
  <h2>Solution # 2</h2>
  <ul>
    <li v-for="(value, propertyName, index) in article.specs">
      <div style="display: flex; gap: 8px;">
        <span>{{ propertyName }}:</span>

        <!-- can use for loop -->
        <span v-for="propValue of value">{{ propValue }}</span>

        <span>{{ index }}</span>
      </div>
    </li>
  </ul>
</div>

Answer 3

使用正确的分隔符：不是 [] 而是 。 ！

  {{ propertyName }}:  {{ value.text }} ({{ index }})

Answer 4

减少模板代码的另一种方法可能是定义一个 compulated:

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