更新数据时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,output

（我正在使用 eventthub 来触发组件上的方法，但这不应该是不触发渲染的原因。）

Answer 1

问题是您的示例中有 2 个 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>