Изменение props (Array) по v-model

Question

Всем привет, изучаю Vue, не могу понять одну вещь, почему когда я изменяю значения массива из props, то они не перерисовываются, когда если это вместо массива стоит обычное число, то все работает?

Vue.component('range-slider', {
  props: ['value'],
  computed: {
    fill() {
      return this.value;
    }
  },
  template: `
    <div class="range">
      <input type="range" :value="value" min="0" max="100" step="1" v-model.number="value">
      <div class="range__data">{{fill}}</div>
    </div>
  `
});

Vue.component('range-slider-two', {
  props: ['value'],
  computed: {
    fill() {
      return this.value;
    }
  },
  template: `
    <div class="range">
      <div class="range__list" v-for="(item, index) in value">
      <input type="range" :value="value[index]" min="0" max="100" step="1" v-model.number="value[index]">
      </div>
      <div class="range__data">{{fill}}</div>
    </div>
  `
});

const vm = new Vue({
  el: '#app'
});

<div id="app">
  <range-slider :value="25"></range-slider>
  <range-slider-two :value="[25, 50]"></range-slider-two>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

При этом, если я создам в data компонента отдельную переменную, то все будет работать:

Vue.component('range-slider', {
  props: ['value'],
  computed: {
    fill() {
      return this.value;
    }
  },
  template: `
    <div class="range">
      <input type="range" :value="value" min="0" max="100" step="1" v-model.number="value">
      <div class="range__data">{{fill}}</div>
    </div>
  `
});

Vue.component('range-slider-two', {
  props: ['value'],
  data() {
    return {
      values: this.value
    }
  },
  computed: {
    fill() {
      return this.values;
    }
  },
  template: `
    <div class="range">
      <div class="range__list" v-for="(item, index) in values">
      <input type="range" :value="values[index]" min="0" max="100" step="1" v-model.number="values[index]">
      </div>
      <div class="range__data">{{fill}}</div>
    </div>
  `
});

const vm = new Vue({
  el: '#app'
});

<div id="app">
  <range-slider :value="25"></range-slider>
  <range-slider-two :value="[25, 50]"></range-slider-two>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

Но в случае с пропсом в качестве числа работает и без этого

Также все работает, если я прикидываю данные из истанса:

Vue.component('range-slider', {
  props: ['value'],
  computed: {
    fill() {
      return this.value;
    }
  },
  template: `
    <div class="range">
      <input type="range" :value="value" min="0" max="100" step="1" v-model.number="value">
      <div class="range__data">{{fill}}</div>
    </div>
  `
});

Vue.component('range-slider-two', {
  props: ['value'],
  computed: {
    fill() {
      return this.value;
    }
  },
  template: `
    <div class="range">
      <div class="range__list" v-for="(item, index) in value">
      <input type="range" :value="value[index]" min="0" max="100" step="1" v-model.number="value[index]">
      </div>
      <div class="range__data">{{fill}}</div>
    </div>
  `
});

const vm = new Vue({
  el: '#app',
  data: {
    ranges: [25, 50]
  }
});

<div id="app">
  <range-slider :value="25"></range-slider>
  <range-slider-two :value="ranges"></range-slider-two>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

Answer 1

Не уверен, но вы же указываете , что value массив, но обращаетесь как не к массиву.

Props - это свойство, которое глобальное и если его передавать компонентам ниже, то его можно получать.
Data - это как бы тоже свойства, но data пишется, когда мы создаем что-то, а props, когда пытаемся пропихнуть.

propsA = {{value}}

Обозначает, что в компоненте ниже под Props "А", можно получить value.

БЛОГ НА HUSL

Изменение props (Array) по v-model

Ответы (1 шт):