Vue.js - Binding array with multiple keys with same name

Question

I am trying to pass multiple values through Vue.js, under the same key name to keep it dynamic.

This is my code:

Input.vue:

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

Now, in my Popover.vue file, I only get the last element of the :fields:

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

Will output:

Title2
Value2

How can I do, so I can set the values of :fields dynamically, so I can access the array in my v-for, and it will output:

Title1
Value1

Title2
Value2

a syntax problem :fields="[{ names: ['Title1', 'value1'], names: ['Title2', 'value2'], }]", i think you are actually trying to do :fields="[ { names: ['Title1', 'value1'] }, { names: ['Title2', 'value2'] }, ]" — Jacob Goh
– Jacob Goh, Commented Sep 18, 2018 at 14:31
I don't think that you can assign two times the same key in a javascript object. const object = { foo: 'one', foo: 'two' } console.log(object) => {foo: 'two'} — Hammerbot
– Hammerbot, Commented Sep 18, 2018 at 14:32
@Hammerbot Any other way I can dynamically assign multiple values to the component directly? — oliverbj
– oliverbj, Commented Sep 18, 2018 at 14:33
You should try what @JacobGoh wrote: :fields="[ { names: ['Title1', 'value1'] }, { names: ['Title2', 'value2'] }, ]" — Hammerbot
– Hammerbot, Commented Sep 18, 2018 at 14:37
Ah, didn't see your comment Jacob! This works like a charm. Please submit it as an answer :) — oliverbj
– oliverbj, Commented Sep 18, 2018 at 14:39

Jacob Goh · Accepted Answer · 2018-09-18 14:57:16Z

1

the problem is in

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

where you are creating 1 array containing only 1 object.

(when an object has duplicated properties, the latter one is used. Therefore, { names: ['Title1', 'value1'], names: ['Title2', 'value2'], } is equilavant to { names: ['Title2', 'value2'], })

What you want is probably 1 array containing 2 objects, which should be

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

answered Sep 18, 2018 at 14:57

Jacob Goh

20.9k5 gold badges57 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

WhosDustin · Accepted Answer · 2018-09-18 14:56:27Z

1

You are not able to have the same key name more than once or the last key will be the only one display.

Correctly iterating through names must be with its own object. Like this:

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

As written by @jacobgoh

answered Sep 18, 2018 at 14:56

WhosDustin

4035 silver badges12 bronze badges

Collectives™ on Stack Overflow

Vue.js - Binding array with multiple keys with same name

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related