Проблема с вычисляемым свойством, не обновляющимся в Vue / Nuxt

Я думал, что хорошо разбираюсь в вычисляемых свойствах и часто их использую, но я в ситуации, когда не понимаю, почему не происходит никакой реакции.

Я пытаюсь использовать вычисленное свойство для доступа и возврата строки, которая является URL-адресом изображения, из массива URL-адресов.

data() {
    return {
        Image1: 'placeholder'
    };
},
computed: {
    ImageTest() {
        if (this.ImageStyleSources.length !== 0) {
            this.Image1 = 'url(' + this.ImageStyleSources[1] + ')'
        } else {}
    }
}

Console.log показывает, что строка (this.ImageStyleSources[1] - из миксина) именно такая, какой она должна быть, а инкапсулирующий 'url(' + ... + ')' идеально соответствует значению фонового изображения CSS.

Когда я заменяю переменную данных на строку, которую она представляет, все работает нормально. Итак, я знаю, что проблема не в самой строке, а скорее в обновлении вычисляемого свойства.

В примечании, возможно, есть проблема (предположительно с vue-devtools), когда отображаются повторяющиеся компоненты. При изучении этих компонентов один набор обновляется именно так, как и должен быть. Другой застрял на исходном возвращаемом значении свойства.

Для большей ясности:

Условие (this.ImageStyleSources.length !==0) также рассчитывается по времени, как и ожидалось, поскольку оно определяет, что массив был обновлен из пустого заполнителя. Я также пробовал использовать логические данные vue вместо этого метода для отметки точки обновленного массива.

Использование vue-fela для обновления background-image:, но пробовал динамический :style (со строковым и объектным синтаксисами), а также другие другие решения css-in-js, кроме fela, думая, что они были причиной проблемы с реактивностью ... но кажется, что не тот случай.

Вопрос: Известны ли проблемы с реактивностью при использовании миксинов? this.ImageStyleSources находится в импортированном миксине.

Еще вопрос: Кто-нибудь знает, что с этим делать?

Мне почти стыдно сказать, что я провел более двух дней, постоянно натыкаясь на одну и ту же стену, поэтому спасибо за чтение. :)

B

РЕДАКТИРОВАТЬ:

Я попытался использовать вычисленное свойство для возврата значения вместо обновления свойства данных:

// Computed
ImageTest() {
    if (this.ImageStyleSources.length !== 0) {
        return 'url(' + this.ImageStyleSources[1] + ')'
    } else {}
}

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

watch: {
    ImageStyleSources: function () {
        if (this.ImageStyleSources.length !== 0) {
            this.Image1 = 'url(' + this.ImageStyleSources[1] + ')'
        } else {}
    }
},

Также попытался вызвать метод в миксине - сразу после того, как массив обновлен и можно использовать - вместо использования условия.

... но у меня такой же опыт, независимо от того, какой метод я использовал для его применения (динамический тег :style или css-in-js). Фон элемента просто не будет обновляться из строки заполнителя свойства данных, или, если данные не используются, он вообще не будет обновляться с возвращенной строкой.


person Brendan    schedule 09.08.2019    source источник
comment
Вычисляемые свойства должны возвращать значение. Им определенно не следует манипулировать значениями свойств data. Это хороший способ попасть в бесконечный цикл   -  person Phil    schedule 09.08.2019
comment
Поскольку в вашем вычисляемом свойстве нет операторов return, трудно понять, что вы здесь пытаетесь сделать. Как в это влияет свойство данных Image1? Где вы используете это вычисленное свойство? Каковы ожидаемые результаты при разных значениях ImageStyleSources?   -  person Phil    schedule 09.08.2019
comment
Вычисляемые свойства являются геттерами - если вы их не получите, они не будут вычисляться. Это нормально, если они вернут undefined или пропустят любой оператор возврата.   -  person Estradiaz    schedule 09.08.2019
comment
Извините за путаницу. Через несколько дней я забыл добавить, что действительно пытался использовать наблюдателя в качестве альтернативы, а также попытался вернуться с вычисленным свойством, как вы можете видеть в редактировании выше. Я ценю ясность того, как работают вычисляемые свойства. Я уже кое-что узнал :) Однако моя проблема не исчезла. Есть еще идеи?   -  person Brendan    schedule 09.08.2019
comment
У меня возникли проблемы с поиском способа точно воспроизвести проблему в Codeandbox. А репозиторий Github превышает лимит импорта модулей в 250. : /   -  person Brendan    schedule 09.08.2019
comment
Пожалуйста, покажите, как вы пытаетесь использовать вычисленное свойство в своем шаблоне   -  person Phil    schedule 12.08.2019


Ответы (1)


Это должен быть наблюдатель:

watch: {
    imageStyleSources: function (source) {
         if (source.length) {
             this.Image1 = 'url(' + source[1] + ')'
         }
    }
}

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

person Ohgodwhy    schedule 09.08.2019
comment
Вместо этого я пробовал использовать наблюдателя, как вы можете видеть в редактировании выше. Приносим извинения за то, что не упомянули. - person Brendan; 09.08.2019