VueJs 2.x 带有多个键的对象的样式绑定不起作用

Question

我是第一次摆弄 vue，在 v-bind:style="styleObject" 开始正常工作时遇到了麻烦。它在 styleObject 中只有一个 key/value-pair 时有效，但当我有超过 1 个 key/value-pair.

时什么也没有

当运行 console.log() 值按预期显示时。

我的vue代码：

<script>
import Vue from 'vue';
import ImageObject from './SkyCropImage.class';

export default Vue.component('sky-crop', {
    props: {
        src: String,
        focalpoint: String,
        mode: String,
        round: String,
        type: {
            type: String,
            default: 'img',
        },
    },
    data() {
        return {
            image: new ImageObject(this.src),
            srcString: '',
            styleObject: { },
        };
    },
    methods: {
        anchorString(image) {
            if (this.$el.firstChild.localName !== 'img') {
                this.styleObject.backgroundPosition = `${image.anchor.x} ${image.anchor.y}`;
            } else {
                const pointX = (image.anchor.x.replace('%', '') * 1) / 100;
                const pointY = (image.anchor.y.replace('%', '') * 1) / 100;

                const differenceX = image.parent.width - image.calculatedInfo.width;
                const differenceY = image.parent.height - image.calculatedInfo.height;

                const anchorX = Math.min(0, differenceX * pointX);
                const anchorY = Math.min(0, differenceY * pointY);

                this.styleObject.transform = `translate(${anchorX}px, ${anchorY}px)`;
            }
        },
        concatSrc(string) {
            this.srcString = string;

            if (this.type !== 'img') {
                this.styleObject.backgroundImage = `url(${string})`;
            }
        },
    },
    created() {
        this.image.mode = this.mode;
        this.image.round = this.round;
        this.image.anchor = {
            x: this.focalpoint.split(',')[0],
            y: this.focalpoint.split(',')[1],
        };
    },
    mounted() {
        this.image.setParentInfo(this.$el);
        this.image.runCropJob();
        this.anchorString(this.image);
        this.concatSrc(this.image.outputUrl);
    },
});

我的模板：

<div class="skyCrop-parent">
<img
    class="skyCrop-element"
    alt=""
    v-if="type === 'img'"
    v-bind:src="srcString" 
    v-bind:style="styleObject" />
// img result: <img alt="" src="https://source.unsplash.com/Ixp4YhCKZkI/700x394" class="skyCrop-element" style="transform: translate(-50px, 0px);">

<div 
    class="skyCrop-element"
    v-bind:style="styleObject"
    v-else>
</div>
//div result: <div class="skyCrop-element"></div>

</div>

组件的调用方式：

<sky-crop
    src="https://source.unsplash.com/Ixp4YhCKZkI/1600x900"
    focalpoint="50%,50%"
    mode="width"
    round="175"
    type="div">
</sky-crop>

<sky-crop
    src="https://source.unsplash.com/Ixp4YhCKZkI/1600x900"
    focalpoint="50%,50%"
    mode="width"
    round="175">
</sky-crop>

Answer 1

错误在于 Vue 处理反应性的方式。

由于我尝试将 key/value 对添加到 styleObject，如下所示：

this.styleObject.backgroundPosition = `${image.anchor.x} ${image.anchor.y}`;

Vue 无法检测到更改，因为我尝试引用的键没有事先声明。解决方案可能是定义所有未来可能是密钥，这会很好地工作。但是使用 vm.$set() 会更好，因为它处理创建密钥并同时启动反应性。简而言之，这一行（以及其他相同的行）：

this.styleObject.backgroundPosition = `${image.anchor.x} ${image.anchor.y}`;

变成了这个：

this.$set(this.styleObject, 'background-position', `${image.anchor.x} ${image.anchor.y}`);

有关更改原因的 Vue 文档： https://vuejs.org/v2/guide/reactivity.html

VueJs 2.x 带有多个键的对象的样式绑定不起作用

VueJs 2.x stylebind with object with multiple keys not working

binding

vue-component

vuejs2