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']"

Answer 1

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>