Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74491

VueJS / v-html shows empty page (Bokeh-html)

$
0
0

I am new to VueJS and I am trying to display a local html-file inside of the Vue Application.

I fetch the html file with axios like following:

<template>
  <div>

    <h1>bla</h1>

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

  </div>
</template>


<script> 
import axios from 'axios'

export default { 

  data() { 
    return { 
      input: null,
      }
 }, 

 created() {
 this.loadFile()
 },

 methods: {
        loadFile() {
          axios({
            method: "get",
            url: "../../test.html"
          })
            .then(result => {
              this.input = result.data;
              console.log("Data: " + result.data)
            })
            .catch(error => {
              console.error("error getting file: " + error);
            });
        },
      }
}

</script>

We generate the html-Files with Bokeh (interactive Charts). If I open the html Files in the Browser they are shown correctly. These files contain <script type="text/javascript"> and <script type="application/json">.

I tried this with a simple "Hello World"-html Example and this works fine and gets displayed in Vue. But when I read the actual file, I just get an empty page. The console.log(result.data) shows me the correct and complete html Code but I don't get any errors, so I can't figure out the problem.

Does anyone know, what I have to adjust to make this work?

Thanks !


Viewing all articles
Browse latest Browse all 74491

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>