[Vuejs]-VueJS / v-html shows empty page (Bokeh-html)

0👍

The reason is the statement this.input = result.data tries to parse result.data as json but it is not.
Send the json from the server and use it in your code properly.

0👍

Are you doing this inside of a .vue file or is all of this in a .html file. If in html you need to remember to set the el property on your Vue model to ensure it knows where to render. If this is a .vue there has to be a defined template for the same reason.

Here is a fiddle with an example. Yes the site has issues rendering with correct layout, but it renders. This is an example for <script> tags in your html file or just a raw .js file. Looks like you were making a Vue component (.vue) but the premise is still the same as long as you define the template where the Vue code is to be rendered.

Edit:

What does your vue file look like? This is what I’m expecting.

<template id="foo">
     <div v-html="input"></div> 
</template>

<script>
export default {
    template:'#foo',
    data: { 
        input: null
    },
    created() {
        this.loadFile();
        },
    methods: {
        loadFile() {
            let _this = this;
            axios({
                method: "get",
                url: 'https://jsfiddle.net/',
            })
            .then(result => {
                console.log(result);
                _this.input = result.data;
                console.log("Data: " + result.data)
            })
            .catch(error => {
                console.error("error getting file: " + error);
            });
        },
    }
};
</script>

Leave a comment