Question

我的英语不太好，我会尽可能清楚地描述问题。

 <template>
  <div class="Index">
    <div
      class="content"
      v-html="content"
    ></div>
  </div>
</template>
export default {
  data() {
    return {
      content: '',

    }
  },
  mounted() {
   // This data is returned by axios,This is rich text with lots of tags, including script
   this.content="<p>1111</p><div>222<div><script>alert() //There is a lot of code here.</script>"
 }
}

控制台将报告此错误：

Syntax Error: SyntaxError: /Users/sinx/development/cxz/src/views/Index.vue: Unterminated template (33:19)

现在，问题在于如何使用v-html将axios返回的数据插入vue。谢谢大家。

最初的判断似乎是由于<script>

的原因

Answer 1

使用axios ...

axios.get函数使用Promise。当API成功返回数据时，将执行then块中的代码。

   mounted() {
      axios.get(url).then(response => {
        this.results = response.data
      })
   }

这里是链接 Using Axios to Consume APIs 来自官方网站。

Answer 2

确保将您的js代码包含在scripts标签内，如下所示；

<script> include </script>

那应该可以解决您的问题。

Answer 3

您应该将所有JS放在script标签中。 Vue应用程序的基本结构是这样的。

<template>
   //Your html here
</template>
<script>
  export default {
     data(){
        return {
           content : ""
         }
      },
     mounted(){
         axios.get(url).then(response => {
           this.content = response.data     //depends on the structure of response
         }).then(error => {
           console.log(error);
          });
        }
      }
<script>

希望这会有所帮助：）

Answer 4

找到问题，如果要渲染富文本，尤其是带有srcipt标签的富文本，则需要对标签进行转义。但是，尽管v-html可以呈现标签，但是不能执行脚本的内容，但是，如果我想知道如何执行脚本的内容，我有办法。

如何在Vue中使用脚本

4 个答案: