更新数据时Vue2组件未渲染

Question

我有一个Vue 2组件在更新数据时没有渲染的情况：

Vue.component('framer-deal', {
data: function(name,src) {
return {
name : "Image1",
src : "https://via.placeholder.com/250"
}
},
created: function () {
eventHub.$on('clickedImage', this.updateimage)
},
methods:{
updateimage : function(imgsrc) {
this.src = imgsrc;
this.name = imgsrc;
console.log("thumbnail", this.$data.name)
}
},
template: '<div><h3>Hello {{name}} {{src}}</h3><img v-bind:src="this.src" /></div>'
})

JS Bin示例：https://jsbin.com/wokiqozipa/edit?js，输出

(我使用eventhub来触发组件上的方法，但这不应该是不触发渲染的原因。(

Answer 1

问题是您的示例中有两个Vue实例：

var vm = new Vue({
el: '#app',
data: {
json: mydata
},
methods: {
open: function(e){

imageframe = e.target.src;
eventHub.$emit('clickedImage', imageframe)
}
}
});
new Vue({ el: '#frame' }) // remove this to make it work

删除new Vue({ el: '#frame' })以使其工作。。。

也不要在模板中使用this。

更改

<div><h3>Hello {{name}} {{src}}</h3><img v-bind:src="this.src" /></div>

至

<div><h3>Hello {{name}} {{src}}</h3><img v-bind:src="src" /></div>