VueJS / v-html 显示空白页面（Bokeh-html）

Question

我是 VueJS 的新手，我正在尝试在 Vue 应用程序中显示一个本地 html 文件。

我使用 axios 获取 html 文件，如下所示：

<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>

我们使用 Bokeh（交互式图表）生成 html 文件。如果我在浏览器中打开 html 文件，它们会正确显示。这些文件包含 <script type="text/javascript"> 和<script type="application/json">。

我用一个简单的“Hello World”-html 示例进行了尝试，它工作正常并显示在 Vue 中。但是当我阅读实际文件时，我只是得到一个空页面。 console.log(result.data) 向我显示了正确且完整的 html 代码，但我没有收到任何错误，所以我无法找出问题所在。

有谁知道，我必须调整什么才能使这项工作？

谢谢！

Answer 1

原因是语句this.input = result.data 试图将result.data 解析为json，但事实并非如此。 从服务器发送 json 并在您的代码中正确使用它。

Answer 2

您是在.vue 文件中执行此操作，还是在.html 文件中执行所有这些操作。如果在 html 中，你需要记住在你的 Vue 模型上设置 el 属性，以确保它知道在哪里渲染。如果这是一个.vue，那么出于同样的原因，必须定义一个template。

Here is a fiddle with an example。是的，该站点在使用正确布局进行渲染时存在问题，但它会渲染。这是 html 文件中的 <script> 标记的示例，或者只是一个原始的 .js 文件。看起来你正在制作一个 Vue 组件（.vue），但前提仍然是相同的，只要你定义了要渲染 Vue 代码的模板。

编辑：

你的 vue 文件是什么样的？这是我所期待的。

<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>