Я думал, что хорошо разбираюсь в вычисляемых свойствах и часто их использую, но я в ситуации, когда не понимаю, почему не происходит никакой реакции.
Я пытаюсь использовать вычисленное свойство для доступа и возврата строки, которая является 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). Фон элемента просто не будет обновляться из строки заполнителя свойства данных, или, если данные не используются, он вообще не будет обновляться с возвращенной строкой.
data
. Это хороший способ попасть в бесконечный цикл - person Phil   schedule 09.08.2019return
, трудно понять, что вы здесь пытаетесь сделать. Как в это влияет свойство данныхImage1
? Где вы используете это вычисленное свойство? Каковы ожидаемые результаты при разных значенияхImageStyleSources
? - person Phil   schedule 09.08.2019