Vue-Daten werden nicht aktualisiert, aber die Daten ändern sich

Question

Ich bin verrückt danach.

Hier ist der Code, die Komponente, die ich in meinem Formular verwende, um eine Videovorschau anzuzeigen, wenn ich eine URL in die Eingabe einfüge:

<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 ist eine Komponente. Ich habe eine einfache Bus-Emissionsfunktion hinzugefügt, wenn die Komponente aktualisiert wird:

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

Wenn ich das Konsolenprotokoll überprüfe, erhalte ich Folgendes

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 funktioniert, this.embedData 看起来不错，我有日志，但是当我在我的视图中渲染 embedData wenn es leer ist.

Ich habe eine zusätzliche Information eingefügt: Ich erzwinge ein erneutes Rendern der eingebetteten Komponente, aber ich glaube nicht, dass sie relevant ist.

Irgendwelche Ideen?

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);
    });