Question

我有一个vue组件，其绑定样式为：

<div id="profile-icon" :style="{'background': 'url('+profile.icon+')'}"></div>
<input name="name" v-model="profile.name" type="text" placeholder="Name">

只有在我更新profile.icon功能下的beforeMount时才会显示图片：

props: ['profileprops'],
data: function() {
    return {
        profile: {
            address:'',
            name:'Name',
            description:'Short description',
            address:'address',
            user_id:'',
            background:'/images/admin/bg.png',
            icon:''
        },
    }
},
beforeMount: function() {
    console.log('profileedit mounted.')
    var self = this;
    if(self.profileprops){
        self.profile = self.profileprops;
    };
    if(!self.profile.icon){
        self.profile.icon = '/images/admin/icon-144.png';
    },
mounted: function() {
    var self = this;
    self.$eventHub.$on('ImageSelected', (imagelink) => {///<-- I have another vue component for selecting images to emit event and to catch it here.
        self.profile.icon = imagelink;
        $('#profilemodal').modal('hide');
    });
},
watch: {
    'profile': {
        handler: function(newVal, oldVal) {
            console.log("changed")
        },
        deep: true
    },
}

我做了一些测试：

如果我选择图片，我可以看到console.log中的$on已经从profile.icon提供了正确的数据。但是，:style未使用新profile.icon更新背景图片。 watch.profile根本没有反应。
如果我开始使用input与v-model绑定profile.name，则所有内容都会立即更新，包括:style中的背景图片。

我相信我必须错过一些内容来同步$on的内部和外部。我该如何解决这个问题？

Answer 1

我找到了解决方案here。

所以我只是在$forceUpdate()内$on：

self.$eventHub.$on('ImageSelected', (imagelink) => {
        self.profile.icon = imagelink;
        self.$forceUpdate();//<-- this does the magic.
    });

然后数据将更新并重新渲染。

vuejs - 更新后台网址后重新安装

1 个答案: