VueJS 中的 v-html 不起作用（空页面）答案

【问题标题】：v-html in VueJS is not working (empty page)VueJS 中的 v-html 不起作用（空页面）
【发布时间】：2020-05-02 04:30:55
【问题描述】：

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

示例 html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test title</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

我做了一些研究，听说一个简单的方法是通过 axios 加载文件并显示结果。所以我这样做了：

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

<script> 
import axios from 'axios'

export default { 

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

 created() {
 this.loadFile()
 },

 computed: {
   contentdisplay: function() {
   return this.input;
   }
 },

 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>

Example.html 工作正常，但是当我尝试加载真实文件时，我什么也没看到。此文件包含
<script type="text/javascript" ... </script> 和 <script type="application/json"> ... </script>

我没有收到任何错误消息，并且带有 result.data 的控制台日志显示正确的 html，但 Vue 没有显示任何内容。我应该如何调整才能完成这项工作？

感谢您的帮助。

【问题讨论】：

您可以在您的 v-html div 中添加 :key="refresh" 并在设置输入后执行 refresh+=1 看看是否有效
做了一个快速测试，对我来说它有效。当您能够在控制台中记录 HTML 时，您的情况应该没有什么不同。你使用 vue-cli 吗？
是的，我使用了 vue-cli，现在我让它与“Hello World”-示例一起使用，但是当我尝试加载真正的 html 时，我什么都看不到...... html是从 Bokeh 生成的，包含

标签： javascript html vue.js vue-component

【解决方案1】：

你为什么不这样做：

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

【讨论】：

是的，这里不需要计算属性。但这两种情况都行！
是的，它有效，但我编辑了问题，现在这是一个不同的问题。感谢您的帮助
将问题编辑为新问题并不是一个好习惯，因为它会破坏 stackoverflow 的要点。最好的办法是在这种情况下创建一个新问题

【解决方案2】：

您不需要为此使用计算属性，只需使用v-html="input"。例如，我对您的代码进行了一些更改：

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

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

您的 res.data 应该是一个合适的 html 才能正常工作。

【讨论】：

【解决方案3】：

试试这个：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.1/axios.js"></script>
</head>
<body>
    <div id="app">
        <div v-html="input"></div>   
    </div>
    <script>
        new Vue({
            el:"#app",
            data: { 
                input: null    
            }, 
            created() {
                this.loadFile()
            },
            methods: {
                loadFile() {
                    axios({
                        method: "get",
                        url: "https://www.w3.org/TR/PNG/iso_8859-1.txt"
                    })
                    .then(result => {
                        this.input = result.data;                        
                    })
                    .catch(error => {
                        console.error("error getting file: " + error);
                    });
                }
            }
        });
    </script>
</body>
</html>

【讨论】：