Develop Reference

Loading HTML file content in a Vue component

I'm having troubles loading the content of an HTML file in a Vue component. Basically i have a Django backend that generates an HTML file using Bokeh and a library called backtesting.py. My frontend is using Nuxt/Vue, so i can't just load the HTML on the page dynamically.
Here is what the HTML file looks like (it was too long to post here): https://controlc.com/aad9cb7f
The content of that file should be loaded in a basic component:
<template>
<div>
<h1>Some content here</h1>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
The problem is that i really don't know how to do that. If i just copy and paste the content in the vue component, i'll get a lot of error due to the fact that i'm using a <script> tag in a component. The only thing i managed to do was to load the BokehJS CDN in my index.html file, but even after that i'll get a Bokeh is undefined error in the component.
What can i do to accomplish this? Any kind of advice is appreciated

Tao's answer is spot on and is very similar to how I've solved this issue for myself in the past.
However, I'd like to throw in an alternative iframe approach that could work in case reactivity is important. Here's a codesandbox link
The only difference is that this approach loads the code/HTML via XHR and writes it manually into the iframe. Using this approach, you should be able to add some reactivity if necessary.
<script>
export default {
components: {},
data() {
return {};
},
async mounted() {
this.initialize();
},
methods: {
async initialize() {
const html = await this.loadHTML();
const doc = this.htmlToDocument(html);
this.updateIframe(doc);
},
async loadHTML() {
const response = await fetch("/plot");
const text = await response.text();
return text;
},
htmlToDocument(html) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
return doc;
},
updateIframe(doc) {
const iframe = this.$refs.frame;
const iframeDocument = iframe.contentWindow.document;
iframeDocument.open();
iframeDocument.write(doc.documentElement.innerHTML);
iframeDocument.close();
}
},
};
</script>
In the codesandbox, I've thrown in two additional methods to give you an example of how reactivity can work with this approach:
modify() {
if (this.orig) {
// Only for the purpose of this example.
// It's already been modified. Just short-circuit so we don't overwrite it
return;
}
const bokehDoc = this.$refs.frame.contentWindow.Bokeh.documents[0];
// Get access to the data..not sure if there's a better/proper way
const models = [...bokehDoc._all_models.values()];
const modelWithData = models.find((x) => x.data);
const { data } = modelWithData;
const idx = Math.floor(data.Close.length / 2);
// Store old data so we can reset it
this.orig = data.Close[idx];
data.Close[Math.floor(data.Close.length / 2)] = 0;
modelWithData.change.emit();
},
reset() {
if (!this.orig) {
return;
}
const bokehDoc = this.$refs.frame.contentWindow.Bokeh.documents[0];
// Get access to the data..not sure if there's a better/proper way
const models = [...bokehDoc._all_models.values()];
const modelWithData = models.find((x) => x.data);
const { data } = modelWithData;
const idx = Math.floor(data.Close.length / 2);
data.Close[idx] = this.orig;
modelWithData.change.emit();
delete this.orig;
}

Probably the simplest way is to make your HTML available at the URL of your choice, on your server (regardless of Vue).
Then, in your app, use an <iframe> and point its src to that html. Here's an example, using codesandbox.io, where I placed what you posted into the index.html. Below you can see it working with both <iframe> and <object> tags:
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
'el': '#app'
})
body {
margin: 0;
}
h1, h3 {padding-left: 1rem;}
object, iframe {
border: none;
height: 800px;
width: 100%;
min-height: calc(100vh - 125px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h1>This content is placed in Vue</h1>
<h3>Vue doesn't really care.</h3>
<iframe src="https://1gk6z.csb.app/"></iframe>
<h1><code><object></code> works, too:</h1>
<object type="text/html" data="https://1gk6z.csb.app/"></object>
</div>
Note: if the domain serving the graph and the one displaying it differ, you'll need server-side configuration to allow the embed (most domains have it turned off by default).

Strategy:
insert and init bokeh in head tag of public/index.html
read file in a string via ajax/xhr and parse as dom tree
extract each needed dom element from the parsed tree
recreate and append each element
No iframe needed. window.Bokeh is directly accessible.
A skeletal example of reactivity is suggested through the method logBkh that logs the global Bokeh object when clicking on the graph
<template>
<div id="app">
<div id="page-container" #click="logBkh"></div>
</div>
</template>
<script>
// loaded from filesystem for test purposes
import page from 'raw-loader!./assets/page.txt'
// parse as dom tree
const extDoc = new DOMParser().parseFromString(page, 'text/html');
export default {
methods: {
logBkh(){
console.log(window.Bokeh)
}
},
mounted() {
const pageContainer = document.querySelector('#page-container')
// generate and append root div
const dv = document.createElement('div')
const { attributes } = extDoc.querySelector('.bk-root')
for(const attr in attributes) {
dv.setAttribute(attributes[attr].name, attributes[attr].value)
}
pageContainer.append(dv)
for(const _scrpt of extDoc.body.querySelectorAll('script')) {
// generate and append each script
const scrpt = document.createElement('script')
for(const attr in _scrpt.attributes) {
scrpt.setAttribute(
_scrpt.attributes[attr].name,
_scrpt.attributes[attr].value
)
}
scrpt.innerHTML = _scrpt.innerHTML
pageContainer.append(scrpt)
}
}
}
</script>
result:

Why is my v-for statement not reacting to Vue properly?

I have the following code
<marker-popup v-for="point in pointsArray" :position="point.latlng" :title="point.name" > </marker-popup>
with marker-popup defined here:
<template>
<l-marker :position="position" :title="title" :draggable="false">
<l-popup :content="text"></l-popup>
</l-marker>
</template>
<script>
export default {
name: 'MarkerPopup',
props: ['position','title'],
computed: {
text: function(){
return "<b>" + this.title + "</b><br>"
+ this.position[0] + ", " + this.position[1];
}
}
}
</script>
<style lang="scss">
</style>
pointsArray is updated here:
addPoint: function(data) {
let alreadyExists = false;
if(this.pointsDictionary[data.uid]!=undefined){
alreadyExists = true;
}
this.pointsDictionary[data.uid] = {};
this.$set(this.pointsDictionary,data.uid,{
'name': data.name,
'latlng': data.latlng,
'uid': data.uid
});
// this.pointsDictionary[data.uid]['name'] = data.name;
// this.pointsDictionary[data.uid]['latlng'] = data.latlng;
// this.points[data.uid]["marker"] = null;
if(alreadyExists){
console.log("exists");
var index = this.pointsArray.find(function(point){
return point.uid == data.uid;
});
//this.$set(this.pointsArray,index,this.pointsDictionary[data.uid]);
this.pointsArray.splice(index,1,this.pointsDictionary[data.uid]);
}
else {
this.pointsArray.push(this.pointsDictionary[data.uid]);
}
console.log(JSON.stringify(this.pointsDictionary));
console.log(JSON.stringify(this.pointsArray2()));
}
However, it does nothing to affect the v-for statement. Whenever the addPoint() method runs, it alters pointsArray in one of two ways
It pushes to the array - this works fine, v-for is perfect
It changes an element in the array according to what the Vue.js docs recommend here. This does not work at all. My console.log statements tell me that the change occurs in pointsArray - Vue does not react to that change despite me trying their recommended approach for changing arrays.
I could, I suppose, remove the element and then just push it but that approach seems clumsy and this should work according to their docs.

Turns out that I was doing everything right but the vue-leaflet package doesn't play nicely with Vue 2.0 and refuses to properly react. Switching over to this one solved all the problems.

Better way of manipulating the DOM in Angular2

What's the better way of manipulating the DOM to change the background of a specific div, rather than using document.getElementById('id').style.backgroundImage.
I'm trying to change backgrounds as I change my Url, but the only way I could think and easy is using document.getElementById()
changeBg() {
var urlPath = window.location.pathname.split('/');
switch (urlPath[4]) {
case "Refreshments%20North":
document.getElementById('homeBg').style.backgroundImage = "url('./assets/imgs/spur-2.jpg')";
break;
... more cases
default:
document.getElementById('homeBg').style.backgroundImage = "url('./assets/imgs/background.jpg')";
}
}
I also tried Renderer dependency but how do I target homeBg using this?
this.renderer.setElementStyle(this.elRef.nativeElement, 'background-image', "url(./assets/imgs/spur-2.jpg)");
Template -- is basically just a div
<nav></nav>
<div id="homeBg"></div>
Edit --
Moved my changeBg() to my sharedService
public changeBg() {
var urlPath = window.location.pathname.split('/');
switch (urlPath[4]) {
case "Refreshments%20North":
this.homeBg = this.sanitizer.bypassSecurityTrustStyle("url('./assets/imgs/spur-2.jpg')");
break;
default:
this.homeBg = this.sanitizer.bypassSecurityTrustStyle("url('./assets/imgs/background.jpg')");
}
}
Calling changeBg() service in my profile component
ngOnInit() {
this.sharedService.changeBg(); // is this correct?
}
Profile template -- like this gives me an error Cannot read property 'homeBg' of undefined
<div class="home" id="homeBg" [style.background-image]="changeBg?.homeBg"></div>
Change background with route.param.subscribe()
this.routeSub = this.route.params.subscribe(params => {
this.sharedService.changeBg();
}

Using binding and directives is the preferred way in Angular2 instead of imperative DOM manipulation:
<div [style.background-image]="myService.homeBg"
You need to sanitize the URL for Angular to accept it.
See In RC.1 some styles can't be added using binding syntax for more details.
changeBg() {
var urlPath = window.location.pathname.split('/');
switch (urlPath[4]) {
case "Refreshments%20North":
this.homeBg = this.sanitizer.bypassSecurityTrustStyle("url('./assets/imgs/spur-2.jpg')");
break;
... more cases
default:
this.homeBg = this.sanitizer.bypassSecurityTrustStyle( "url('./assets/imgs/background.jpg')");
}
}
See also How to add background-image using ngStyle (angular2)?

You can use template references and #ViewChild decorator:
template :
<div #myDiv id="homeBg"></div>
component :
class MyComponent implements AfterViewInit{
#ViewChild("myDiv")
elRef:ElementRef
ngAfterViewInit(){
this.renderer.setElementStyle(this.elRef.nativeElement, 'background-image', "url(./assets/imgs/spur-2.jpg)");
}
}

Infinite update loop

I'm trying to build a reusable Image Loader component in Vue.js, which should:
Manage its own thumbnail data
Take src from parent as prop
Display different thumbnails based on prop, using same instance without being destroyed
So it may take data from two places (own thumbnail state || src prop), and I have a very difficult time wrapping my head around how to manage this. Not too sure if this is the right approach to the problem either.
At this point I am getting an infinite update loop warning in the console.
[Vue warn]: You may have an infinite update loop in a component render function.
Here is my code. Any help whatsoever would be greatly appreciated.
<template>
<div>
<label class="fileContainer">
<span class="icon is-large">
<i class="fa fa-camera"></i>
</span>
<input type="file" :index="index" #change="updateThumbnail"/>
</label>
<object
:data="pdfURL"
type="application/pdf"
:class="{visible: pdfURL != ''}">
</object>
<img :src="getSrc()" />
</div>
</template>
<script>
export default {
props: ["index", "srcProp"],
data() {
return {
imageSrc: '',
imageDataURI: '',
pdfURL: '',
}
},
methods: {
getSrc() {
if (typeof this.srcProp !== "undefined") {
this.imageSrc = ''
if (this.srcProp !== '') {
this.imageSrc = this.srcProp
} else {
this.imageSrc = this.imageDataURI
}
} else {
this.imageSrc = this.imageDataURI
}
return this.imageSrc
},
updateThumbnail(event) {
this.$emit('change')
const fileTypes = ['jpg', 'jpeg', 'png']
const imgFile = event.target.files[0] || event.srcElement.files[0]
const extension = imgFile.name.split('.').pop().toLowerCase()
const isImg = fileTypes.indexOf(extension) > -1
if (extension === 'pdf') {
const pdfURL = URL.createObjectURL(imgFile);
this.pdfURL = pdfURL
this.height = 200
return
} else if (isImg) {
var reader = new FileReader();
reader.readAsDataURL(imgFile);
reader.onload = () => {
this.imageDataURI = reader.result
return
}
} else {
alert("Please submit images or PDFs only.")
}
},
}
}
</script>

I was facing the same problem. Let me explain to you what I know.
When :src="anyFunction()" is used it re-renders upto infinite time even after it gets the result.
At this point we get same array for infinite times. Try displaying console.log('this.imgSrc'), you will get infinite number of array.
Here we cannot use slice or splice to get the first array. I haven't found solution but I managed to keep variables in a src rather than rendering whole function and getting url.
<img :src="'https://maps.googleapis.com/maps/api/staticmap?zoom=15&size=500x250&markers=color:red%7Clabel:L%7C'+this.leadIpinfo.loc.split(',').slice(0,1)+','+this.Ipinfo.loc.split(',').slice(1,2) alt="loc">
Here I have fetched the array and splited and sliced into 2 values.
Hope it could help in some ways.

Chart.js & Angular 2 - ng2-charts Custom on Click Event

I am trying to implement ng2-charts in my Angular 2 project and I was wondering about creating custom onclick events. Meaning, I want to override the current onclick events on the carts to do some custom functions (redirect to a page, have a modal show up, etc).
Is there a simple way to do this? Is it built in at all?
Any insight would be appreciated it

I found this solution at https://github.com/valor-software/ng2-charts/issues/489
public chartClicked(e: any): void {
if (e.active.length > 0) {
const chart = e.active[0]._chart;
const activePoints = chart.getElementAtEvent(e.event);
if ( activePoints.length > 0) {
// get the internal index of slice in pie chart
const clickedElementIndex = activePoints[0]._index;
const label = chart.data.labels[clickedElementIndex];
// get value by index
const value = chart.data.datasets[0].data[clickedElementIndex];
console.log(clickedElementIndex, label, value)
}
}
}

Try to read DOCS
They have pretty good and understandable explanation of use.
There-are built-in 2 event handlers:
Events
chartClick: fires when click on a chart has occurred, returns information regarding active points and labels
chartHover: fires when mousemove (hover) on a chart has occurred, returns information regarding active points and labels
In code it looks like that:
<base-chart class="chart"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColours"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></base-chart>
</div>
that chartHovered and chartClicked are your custom functions, which could has another names, and do custom things like showing modal, redirect to url etc.

public chartClicked(e: any): void {
console.log(e);
}
e.active[0]._model and e.active[0]._view contain information about the part of the chart you clicked (i.e. label).

I hope my answer is correct. After much searching for the only solution I found was:
public chartClicked(e:any):void {
if(e.active.length > 0){
var points = [];
var pointSelected = e.active[0]._chart.tooltip._model.caretY;
var legends = e.active[0]._chart.legend.legendItems;
for (var i = 0; i < e.active.length; ++i) {
points.push(e.active[i]._model.y);
}
let position = points.indexOf(pointSelected);
let label = legends[position].text
console.log("Point: "+label)
}}

After checking multiple places, I got it working like this for click event.
HTML:
<div class="chart">
<canvas
baseChart
[data]="pieChartData"
[type]="pieChartType"
[options]="pieChartOptions"
[plugins]="pieChartPlugins"
(chartHover)="chartHovered($event)"
>
</canvas>
</div>
TS:
public chartHovered(e: any): void {
if (e.event.type == "click") {
const clickedIndex = e.active[0]?.index;
console.log("Clicked index=" + clickedIndex);
}
}
Ref