Passing an array to props?

Question

Vue.js

Hello. Tell me please. When passing an array through props, the value of the variable in data is not updated. The pickeds
variable is not updated when the value of the passed value changes when we move to the next element.

<app-some :value='items[activeId].value' ></app-some>

Here is an example

Vue.component('app-some', {
  props: ['value'],
  data() {
    return {
      pickeds: this.value
    }
  },
  template: `
    <div>
      <label v-for='(picked, index) in pickeds' style='margin: 15px' :key='index'>
        <input type='checkbox' :checked='pickeds[index]'> {{ index }}
      </label>
    </div>`
});


new Vue({
  el: '#app',
  template: `
    <div>
      <app-some :value='items[activeId].value' ></app-some>
      <button :disabled='activeId===0' @click='activeId--' >Назад</button>
      <button :disabled='activeId===items.length-1' @click='activeId++' >Далее</button>
      <pre>{{ items[activeId].value }} </pre>
    </div>`,
  data() {
    return {
      activeId: 0,
      items: [ { value: [false, true, false] }, { value: [true, true, false] }]
    }
  }
})

Answer 1

The point is that the value of pickeds is only set once, when the app-some bean is instantiated, so it's weird to expect it to change - you don't do that anywhere.
I don’t know what exactly you need, but ... To switch the checkboxes, there are options:

• Reject inner array, use parameter. Like so .
  
• Use computed instead of data. Like so .
  
• Set key to app-some, this will cause a new component instance to be created when the activeId changes. Like so .