2

所以我认为我很好地理解了计算属性并且经常使用它们，但是我处于一种我不明白为什么没有反应发生的情况。

我正在尝试使用计算属性从 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 background-image 值完美匹配。

当我用它代表的字符串替换数据变量时，一切正常。所以我知道问题不是字符串本身，而是计算属性的更新。

在可能相关的注释中，存在一个问题（可能与 vue-devtools 相关），其中显示了重复的组件。在查看这些组件时，一组完全按照应有的方式更新。另一个则停留在该属性的原始返回值上。

为了更加清晰：

条件 ,(this.ImageStyleSources.length !==0)也是按预期计时的，因为它确定数组已从其空占位符更新。我也尝试过使用布尔 vue 数据而不是这种方法来标记更新数组的点。

使用 vue-fela 更新background-image:但尝试过的动态:style（使用字符串和对象语法）以及除 fela 之外的其他 css-in-js 解决方案，认为它们是反应性问题的原因......但似乎不是t 的情况。

问题：使用 mixin 时是否存在已知的反应性问题？this.ImageStyleSources在进口的mixin中。

另一个问题：有谁知道该怎么做？

我几乎很尴尬地说我已经花了两天多的时间反复撞到同一堵墙，所以感谢您的阅读。:)

乙

编辑：

我尝试使用计算属性返回值，而不是更新数据属性：

// 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-in-js）。元素的背景根本不会从数据属性的占位符字符串更新，或者如果不使用数据，它根本不会用返回的字符串更新。

4

1 回答 1

1

这应该是一个观察者：

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

计算的 getter 应该返回一个值，而观察者只是通用的反应属性观察者，您可以在其中进行一些修改并退出。

于 2019-08-09T04:27:58.127 回答