v-bind array string prop does not assign to component prop values

[bgilbert6]

I tried to follow this github issue to set arrays on a prop, but it doesn't seem to work on the custom element:

https://github.com/vuejs/vue/issues/1177

<my-component :my-array="[5, 10]"></my-component>

props: {
    myArray: {
      default: () => [5, 25, 75, 150, 250, -1],
      type: Array
    }
  }

Other props are working no problem.

[karol-f]

Hi, what does it mean "not work". Can You prepare CodeSandbox with example?

Preferably clone https://codesandbox.io/s/vue-template-jk9jv or give GitHub link to repository.

[bgilbert6]

Thank you for the quick reply. Take a look here: https://codesandbox.io/s/vue-template-ipgie

There is no error but the prop value isn't assigned. Check out the console results:

my-array="works but broken"
["works but broken", __ob__: Observer]

:my-array="['does', 'not', 'work']"
using default values instead of passed :my-array
[5, 25, 75, 150, 250, -1, __ob__: Observer] 

[karol-f]

Hi, here You have 3 examples how to set Array prop - https://codesandbox.io/s/vue-template-rpmi5?file=/src/App.vue

• my-array="'works', 'this', 'way'" - if prop type is e.g. Array, 'vue-custom-element' convert value using Array(value) - so that's why it works this strange way
• :my-array="['does', 'work']" - as this is purely Vue syntax (due to colon - :) You have to use it inside Vue component (that's why it wasn't working for You
• preffered way IMHO should be 3rd option

  
  // template
  <test-component class="jsProp"></test-component>

// JS querySelector(".jsProp").myArray = ["JS", "Prop"];

Regards.