0

Всем привет, изучаю 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>

2
  • во-первых, в html <div class="app"> а вы инициализируете для el: '#app', во-вторых, добавьте версию vue в демо своё чтобы всё работало
    – InDevX
    18 янв 2021 в 7:57
  • @InDevX поправил, сейчас все видно
    – user324358
    18 янв 2021 в 8:00

1 ответ 1

0

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

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

propsA = {{value}}

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

5
  • Указываю :value="[25, 50]" массив, обращаюсь в template как в массиве v-for="(item, index) in value" и дальше указываю value и v-model value[index], т.е. обращаюсь непосредственно к значению пропса (массив). если я так делаю с инстансом new Vue, то это замечательно работает, если я это делаю в компоненте не с массивом, а с числом, то это также работает. не пойму, что здесь не так
    – user324358
    18 янв 2021 в 9:49
  • я попробовал передать строку '10, 25' и в created написал value.replace(' ', '').split(',').map(i=>+i) и все заработало с тем же кодом. подозреваю, что проблема именно в том, что я в пропсы передаю массив
    – user324358
    18 янв 2021 в 9:58
  • Ну смотрите. Вы как props передаете какое-то свойство. На пример name ={{'Игорь'}}. (Тут нет массива, а просто str). Дальше компонентом ниже, вы как props получаете name. Получается примерно, что и с переменными. const name = 'Игорь'; А потом console.log(name) Только props нужен, потому, что компонент ниже о существовании Игорь знать не знает.
    – WalkMess
    18 янв 2021 в 10:00
  • нет, когда я указываю пропс :value="[10, 25]", то передается именно массив (dropbox.com/s/5i7d90izm2mcd38/…), это можно посмотреть. он меняется, но не перерисовывается. Но что очень странно, если я в created напишу такой финт this.value = [...this.value], то станет работать. Что для меня очень странно
    – user324358
    18 янв 2021 в 10:02
  • Для того, чтобы понять, что данные меняются, но не перерисовываются, я пробовал у инпута написать @input="console.log(value)", и они меняются, но на экране данные остаются старыми
    – user324358
    18 янв 2021 в 10:06

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.