data vue tidak dikemas kini tetapi data berubah

Question

Saya gila tentang ini.

Berikut ialah kod, komponen yang saya gunakan dalam borang saya untuk menunjukkan pratonton video apabila menampal url ke dalam input:

<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 ialah komponen, saya menambah fungsi pelepasan bas yang mudah apabila komponen dikemas kini:

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

Jika saya menyemak log konsol saya mendapat ini

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>

Semua fikir berfungsi, this.embedData 看起来不错，我有日志，但是当我在我的视图中渲染 embedData apabila ia kosong.

Saya telah memasukkan maklumat tambahan: Saya memaksa pemaparan semula komponen terbenam, tetapi saya rasa ia tidak berkaitan.

Ada idea?

Answer 1

Mythos menemui isu ini (sekurang-kurangnya satu daripadanya). Templat misai (kurung kerinting berganda) mentafsir kandungan sebagai teks biasa, bukan html. Jika anda ingin menyuntik html mentah ke dalam halaman anda, anda harus melakukan ini

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

Answer 2

Anda menggunakan fungsi tanpa nama. this Fungsi tanpa nama dalaman tidak menyediakan konteks komponen.

Cuba gunakan fungsi anak panah:

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