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