CODEWITHSUNDEEP
javascriptvue.js
Roberto Pezzali
Roberto Pezzali

Reputation: 2504

Vue data not updated but data changes

I'm getting crazy on this.

This is the code, is a component I'm using inside a form to show the preview of a video when I paste an url into an 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 is a component, and I've added a simple bus emit function when the component is update:

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

If I check the console log I have this

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 is working, this.embedData looks ok, I have the log, but when I render embedData in my view it's empty.

I give an additional info: I'm forcing the re-rendering of the embed component, but I don't think it's related.

Any ideas?

Upvotes: 0

Views: 899

Answers (2)

vicovicovico
vicovicovico

Reputation: 507

Mythos found the issue (at least one of them). The mustache template (double curly braces) interpret contents as plain text, not html. If you want to inject raw html into your page you should do something like

<div v-html="embedData"></div>

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

Upvotes: 1

Mythos
Mythos

Reputation: 1482

You're using an anonymous function. this inside the anonymous function does not provide the component's context.

Try using an arrow function instead:

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

Upvotes: 2

Related Questions