Solving this puzzle is driving me insane.
Let's take a look at the code. This snippet represents a component used within a form to display a video preview when a URL is pasted into an input field:
<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">Video URL</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 separate component, and I've included a basic event bus emit function that triggers when the component updates:
mounted: function() {
EventBus.$on('HTML', function (payLoad) {
this.embedData = payLoad
console.log('payLoad:' + this.embedData);
});
}
Upon checking the console log, the output is as follows:
payLoad: <iframe src="https://player.vimeo.com/video/596287904?app_id=122963&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>
Everything appears to be functioning correctly. this.embedData contains the expected data in the log. However, when trying to render embedData in the view, it shows up empty.
As an additional detail, although I am forcing a re-render of the embed component, I suspect this issue may not be directly related to that. Any thoughts or suggestions on what might be causing this?