Vue.js-具有相同名称的多个键的绑定数组

Question

我试图通过Vue.js以相同的键名传递多个值，以使其保持动态。

这是我的代码：

Input.vue：

<search-popover :fields="[{
 names: ['Title1', 'value1'],
 names: ['Title2', 'value2'],
}]"></search-popover>

现在，在我的Popover.vue文件中，我仅得到:fields的 last 元素：

<ul v-for="field in fields">
    <li>
       <h5>{{ field.names[0] }}</h5>
       {{ values[field.names[1]]}}
    </li>
</ul>

将输出：

Title2
Value2

我该怎么做，所以我可以动态设置:fields的值，这样我就可以访问v-for中的数组，它将输出：

Title1
Value1

Title2
Value2

Answer 1

您不能多次使用相同的键名，否则最后一个键将是唯一的一个显示。

正确遍历names的对象必须是其自己的对象。像这样：

:fields = "[
  { names: ['Title1', 'value1'] }, 
  { names: ['Title2', 'value2'] }
]"

由@jacobgoh撰写

Answer 2

问题出在

:fields="[{
 names: ['Title1', 'value1'],
 names: ['Title2', 'value2'],
}]"

您要创建1个仅包含1个对象的数组。

（当对象具有重复属性时，将使用后者。因此，{ names: ['Title1', 'value1'], names: ['Title2', 'value2'], }与{ names: ['Title2', 'value2'], }等价）

您想要的可能是1个包含2个对象的数组，应该是

:fields="[ 
    { names: ['Title1', 'value1'] }, 
    { names: ['Title2', 'value2'] }, 
]"