Vue.js - Связывание массива с несколькими ключами с одинаковым именем

Question

Я пытаюсь передать несколько значений через Vue.js под одним и тем же именем ключа, чтобы сохранить его динамический.

Это мой код:

Input.vue:

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

Теперь в моем файле Popover.vue я получаю только последний элемент :fields:

<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

проблема в

: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'] }, 
]"

Answer 2

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

Правильная итерация по names должна быть со своим собственным объектом.Как это:

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

Как написано @ jacobgoh