les données de vue ne sont pas mises à jour mais les données changent

Question

Je suis fou de ça.

Voici le code, le composant que j'utilise dans mon formulaire pour afficher un aperçu vidéo lors du collage d'une URL dans l'entrée :

<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 est un composant, j'ai ajouté une simple fonction d'émission de bus lors de la mise à jour du composant :

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

Si je vérifie le journal de la console, j'obtiens ceci

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 fonctionne, this.embedData 看起来不错，我有日志，但是当我在我的视图中渲染 embedData quand il est vide.

J'ai inclus une information supplémentaire : je force un nouveau rendu du composant embarqué, mais je ne pense pas que ce soit pertinent.

Des idées ?

Answer 1

Mythos a découvert ce problème (au moins un d'entre eux). Les modèles de moustache (doubles accolades) interprètent le contenu comme du texte brut et non comme du HTML. Si vous souhaitez injecter du HTML brut dans votre page, vous devriez le faire

Au lieu de cela (https://v2.vuejs.org/v2 /guide/syntax.html#Raw-HTML)

Answer 2

Vous utilisez une fonction anonyme. this La fonction anonyme interne ne fournit pas le contexte du composant.

Essayez d'utiliser les fonctions fléchées :

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