Всем привет, изучаю 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>
<div class="app">
а вы инициализируете дляel: '#app'
, во-вторых, добавьте версию vue в демо своё чтобы всё работало