vue数据未更新但数据发生变化

Question

我对此感到疯狂。

这是代码，是我在表单中使用的组件，用于在将网址粘贴到输入中时显示视频预览：

<template>
  <div class="row">
    {{embedData}}
    <input v-model="embedData" name="content[body]" id="content_body">
    <div class="col-md-6">
      <div class="form-group">
        <div class="form-group url optional content_video_url form-group-valid">
          <label for="content_video_url" class="url optional">Url del video</label>
          <input @change="forceRerender" v-model="url" type="url" value="" name="content[video_url]" id="content_video_url" class="form-control is-valid string url optional">
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="video-responsive"
        <o-embed ref="embed" :url="url" :key="componentKey"></o-embed>
      </div>
    </div>

  </div>
</template>

<script>

import oEmbed from './oEmbed'
import EventBus from '../utils/eventBus'

export default {
  components: {
    oEmbed
  },

  props: {
    video_url: String,
    video_caption: String
  },

  created: function() {
    this.url = this.video_url;
    this.caption = this.video_caption;
  },
  mounted: function() {
    EventBus.$on('HTML', function (payLoad) {
      this.embedData = payLoad
      console.log('payLoad:' + this.embedData);
      console.log('arrived');
    });
  },
  data: function() {
    return {
      url: '',
      caption: '',
      componentKey: 0,
      embedData: ''
    }
  },
  methods: {
    forceRerender () {
      this.componentKey = this.componentKey + 1;
    }
  }
}
</script>

o-embed是一个组件，我在组件更新时添加了一个简单的总线发射函数：

mounted: function() {
    EventBus.$on('HTML', function (payLoad) {
      this.embedData = payLoad
      console.log('payLoad:' + this.embedData);
    });
  }

如果我检查控制台日志，我会得到这个

payLoad: <iframe src="https://player.vimeo.com/video/596287904?app_id=122963&amp;h=d77f5dc57c" width="426" height="240" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Raritan Bay Cruisers-Hopelawn New Jersey CruisebNight 8-31-2021.wmv"></iframe>

Everythink 正在工作，this.embedData 看起来不错，我有日志，但是当我在我的视图中渲染 embedData 时它是空的。

我提供了一个附加信息：我正在强制重新渲染嵌入组件，但我认为它不相关。

有什么想法吗？

Answer 1

Mythos 发现了这个问题（至少其中之一）。 Mustache 模板（双花括号）将内容解释为纯文本，而不是 html。如果你想将原始 html 注入到你的页面中，你应该这样做

相反 (https://v2.vuejs.org/v2 /guide/syntax.html#Raw-HTML)

Answer 2

您正在使用匿名函数。 this 内部的匿名函数不提供组件的上下文。

尝试使用箭头函数：

EventBus.$on('HTML', (payLoad) => {
      this.embedData = payLoad
      console.log('payLoad:' + this.embedData);
    });