Vue / Nuxt中

时间:2019-08-09 02:00:59

标签: vue.js nuxt.js computed-properties vue-reactivity

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

我正在尝试使用计算属性从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属性的占位符字符串更新,或者,如果不使用数据,则根本不会使用返回的字符串更新。

1 个答案:

答案 0 :(得分:0)

这应该是一个观察者:

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

计算的获取器应返回一个值,而观察者只是一般的反应性属性观察者,您可以在其中进行一些修改并退出。