所以我认为我很了解计算属性,并且经常使用它们,但是我处于一种不了解为什么没有反应发生的情况。
我正在尝试使用计算属性从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]
-来自mixin)正好应该是它,并且封装的'url(' + ... + ')'
与CSS背景图像值完全匹配。 / p>
当我用它代表的字符串替换数据变量时,一切正常。因此,我知道问题不在于字符串本身,更重要的是计算属性的更新。
在可能的相关说明中,存在一个问题(大概是vue-devtools),其中显示了重复的组件。在研究这些组件时,将完全更新一组。另一个卡在该属性的原始返回值上。
为了更加清楚:
条件(this.ImageStyleSources.length !==0)
的计时也符合预期,因为它确定数组已从其空占位符更新。我还尝试使用布尔vue数据代替此方法来标记更新数组的点。
使用vue-fela更新background-image:
,但尝试了动态:style
(具有字符串和对象语法)以及fela之外的其他css-in-js解决方案,认为这是原因反应性问题的答案...但是事实并非如此。
问题:使用mixins时是否存在已知的反应性问题? this.ImageStyleSources
在导入的mixin中。
另一个问题:有人知道如何处理吗?
我几乎尴尬地说我已经花了两天多时间撞到同一堵墙了,所以感谢您的阅读。 :)
B
编辑:
我尝试使用计算属性返回值,而不是更新data属性:
// 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 {}
}
},
还尝试在mixin中调用方法-在数组更新和可用之后-而不使用条件。
...但是,无论我使用哪种方法(动态:style
标记或CSS-JS),我都有相同的经验。元素的背景根本不会从data属性的占位符字符串更新,或者,如果不使用数据,则根本不会使用返回的字符串更新。
答案 0 :(得分:0)
这应该是一个观察者:
watch: {
imageStyleSources: function (source) {
if (source.length) {
this.Image1 = 'url(' + source[1] + ')'
}
}
}
计算的获取器应返回一个值,而观察者只是一般的反应性属性观察者,您可以在其中进行一些修改并退出。