Beutelevision

I recently needed to pull in a third party form into a page where I was using Vue.js. The form is displayed in an iframe and the adjacent content needed to react to submitting of the form, in this case a header needed to disappear. Here is what I came up with:


data: {
load_count: 0,
display_header: true
},
method:
hideHeader: function() {
this.load_count++;
if(this.load_count >= 2){
this.display_header = false;
}
},
template:'<div><h2 v-show="display_header">Please register</h2>'
+'<iframe v-on:load="hideHeader" width="500" height="450"'
+'src="http://www.example.com/path/to/form"></iframe>'
+'</div>'


Note that the hideHeader function will be triggered on the first load as well as all subsequent loads. I added a counter so that the header was changed on the second load, presumably when the form is submitted. It would have been nice to get the actual href of the iframe when it changed but that is not possible when using a form from a different domain.