VueJS проблема реактивности для объекта внутри массива - PullRequest
Новая
       24

VueJS проблема реактивности для объекта внутри массива

1 голос
/ 27 июня 2019

Я объявил свой объект данных как queuedItemList: [], который должен содержать массив элементов, предоставляемых фоновым сервисом.После HTTP-запроса я заполняю список с помощью цикла for, подобного 

for(var i = 0; i < getList.length; i++) {
    var newObject = Object.assign({}, getList[i]);
    this.queuedItemList.splice(i, 1, newObject);
}

, который используется для заполнения следующего шаблона 

<Item v-for="(item, index) in queuedItemList" :key="index" :componentData="item" :index="index" @remove="removeItem">
</Item>

Я должен периодически выполнять HTTP GET дляполучить новый список элементов, который также может содержать текущие элементы с другим состоянием.Внутри компонента я использую v-if для выбора между двумя различными значками. 

<v-icon name="play" class="controlIcons" v-if ="playControl" />
<v-icon name="pause" class="controlIcons" v-if ="!playControl" />

Теперь, после некоторых HTTP-запросов, я вижу изменение значения playControl в Vue Devtools, которое подтверждает, чтоФактическое значение отражается в компоненте.Однако я не вижу изменения значков из-за изменения значения playControl.Кроме того, все работает как положено, если я обновляю экран.

Я предполагаю, что я где-то испортил реактивность.Спасибо!

Ответы [ 4 ]

1 голос
/ 27 июня 2019

Вы ищете https://vuejs.org/v2/guide/reactivity.html

for(var i = 0; i < getList.length; i++) {
    var newObject = Object.assign({}, getList[i]);
    this.$set(this.queuedItemList, i, newObject);
}

Другим способом может быть обновление списка элементов родительского элемента: ключ - таким образом, повторная визуализация - каждый раз, когда вы добавляете элемент: 

</div :key="computedKey">    
    <Item v-for="(item, index) in queuedItemList" :key="index" :componentData="item" :index="index" @remove="removeItem"></Item>
</div>

С 

computed: {
    computedKey () {
        return this.queuedItemList.length
    }
}
0 голосов
/ 28 июня 2019

Вы можете использовать несколько свойств для проверки реактивности, $set, чтобы изменить свойство объекта, $nextTick, чтобы присвоить значение.

Если оба не работают, вы можете попробовать $forceUpdate()

0 голосов
/ 27 июня 2019

Оказывается, мне нужна была комбинация сеттеров и наблюдателей.Я использовал сеттеры @ alx.lzt и наблюдателя на уровне компонентов, и это решило все

0 голосов
/ 27 июня 2019

я не знаю структуру "playcontrol" 

<v-icon name="play" class="controlIcons" v-if ="playControl" />

Я проходил мимо чего-то похожего в прошлом, когда вы обновляете значение "playControl", вы просто делаете "playControl = newValue"? Если вы это сделаете, это может испортить реактивность, попробуйте использовать директиву Vue $ set, например: 

Vue.set(this.playControl, <value>);

https://vuejs.org/v2/guide/migration.html#vm-set-changed

...