时间戳

首页 > 解决方案 > 更新数据时Vue2组件不呈现

vue.js - 更新数据时Vue2组件不呈现

问题描述

我有一个案例，当我更新它的数据时，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 来触发组件上的方法，但这不应该是不触发渲染的原因。）

标签： vue.jsvuejs2vue-component

解决方案

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

推荐阅读