vue js, how to pass an array in a template?

Question

I just want to pass an array, or dict into a vue template:

 Vue.component('step', {

  props: ['data'],
  template: `
      <span> {{data}} {{typeof(data)}}</span>
  `
})

in html:

 <div id="app">
     <step data="['tefdfxt', 'Cats']"></step>
 </div>

Is evaluated as a string where it should be an array:

  ['tefdfxt', 'Cats'] string

My question is: How can you pass an array in html attribute in a way that's not evaluated as a sequence of string? The documentation didn't helped me. Of course, I tryed {{}}, and all the parser invocation. Didn't work. Always evaluated as string.

edit:

I need to add v-bind to the attribute in order to be evaluated as object: https://forum.vuejs.org/t/how-to-pass-array-in-child-component-as-a-prop/3584

So replace data="['tefdfxt', 'Cats']" by v-bind:data="['tefdfxt', 'Cats']"

If your edit contains the solution, please add it as an answer. — Arj
– Arj, Commented Apr 3, 2018 at 9:53

rap-2-h · Accepted Answer · 2018-04-03 10:13:24Z

5

Based on your edit for future readers, you should replace data by v-bind:data:

<div id="app">
  <step v-bind:data="['tefdfxt', 'Cats']"></step>
</div>

answered Apr 3, 2018 at 10:13

rap-2-h

32.3k49 gold badges190 silver badges281 bronze badges

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

Collectives™ on Stack Overflow

vue js, how to pass an array in a template?

edit:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

edit:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related