Binding 带有多个键的对象的VueJs 2.x stylebind不起作用

我第一次摆弄vue，在正常工作方面遇到了麻烦。当styleObject中只有一个键/值对时，它可以工作，但当我有一个以上的键/值对时，就什么都没有了

运行

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);
    },
});

从“Vue”导入Vue；
从“./SkyCropImage.class”导入ImageObject；
导出默认Vue.component（'sky-crop'{
道具：{
src:String，
焦点：字符串，
模式：字符串，
圆：弦，
类型：{
类型：字符串，
默认值：“img”，
},
},
数据（）{
返回{
image:newImageObject（this.src），
srcString:“”，
样式对象：{}，
};
},
方法：{
主持人串（图片）{
if（this.$el.firstChild.localName！=='img'）{
this.styleObject.backgroundPosition=`${image.anchor.x}${image.anchor.y}`；
}否则{
常量pointX=（image.anchor.x.replace（'%，''）*1）/100；
常量pointY=（image.anchor.y.replace（'%，''）*1）/100；
const differenceX=image.parent.width-image.calculatedInfo.width；
const differenceY=image.parent.height-image.calculatedInfo.height；
常数anchorX=数学最小值（0，差分x*pointX）；
const anchorY=Math.min（0，差分y*pointY）；
this.styleObject.transform=`translate（${anchorX}px，${anchorY}px）`；
}
},
concatSrc（字符串）{
this.srcString=string；
if（this.type！==“img”）{
this.styleObject.backgroundImage=`url（${string}）`；
}
},
},
创建（）{
this.image.mode=this.mode；
this.image.round=this.round；
this.image.anchor={
x:this.focalpoint.split（'，'）[0]，
y:this.focalpoint.split（'，'）[1]，
};
},
安装的（）{
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>

//img结果：
//分区结果：

组件的调用方式：

<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>

---

漏洞在于Vue处理反应性的方式

因为我尝试向

styleObject

添加键/值对，如下所示：

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

Vue无法检测到更改，因为我尝试引用的密钥没有事先声明。解决方案可以是定义所有的未来，也可以是关键，这将很好地工作。但是，使用

vm.$set（）

会更好，因为它可以处理密钥的创建并同时启动反应。简而言之，这一行（以及其他做同样事情的人）：

变成这样：

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

有关更改原因的Vue文档：

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