Vue.js 如何从动态 HTML 中调用方法

Question

我有一段从服务器发送下来的HTML代码块，我想通过在HTML中嵌入链接来调用一个方法或函数。

在我的 .vue 文件中，该HTML如下显示：

<template>
<div v-html="myhtml"></div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      myhtml: null
    }
  },
  created () {
     this.refreshHTML()
  },
   methods: {
     refreshHTML () {
        axios.get()// get my html
        this.myhtml = response.data
     },
     myFunction () {
       //do my function stuff here...
     }  
  }
}
</script>

我想在获取的HTML中添加一个onclick事件，以便像这样触发我的函数：

<a href="myurl" onclick='event.preventDefault();myFunction(this.href);'>link</a>

但是当我尝试时，会得到以下错误：

引用错误：找不到变量：myFunction

- Stephen

---

你也可以像这样做：https://codepen.io/Kradek/pen/zEopZd?editors=1010 - Bert

Answer 1

这个做法非常不规范。

如果我非得这样做：

我会将函数添加到全局作用域（不好的做法），并从html事件处理程序中调用它（同样是不好的做法）。

<template>
<div v-html="myhtml"></div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      myhtml: null
    }
  },
  created () {
     this.refreshHTML();
     window.myFunction = this.myFunction.bind(this);
  },
   methods: {
     refreshHTML () {
        axios.get()// get my html
        this.myhtml = response.data
     },
     myFunction () {
       //do my function stuff here...
     }  
  }
}
</script>

考虑将HTML转换为Vue组件，并使用它们代替。

- PiniH

---

谢谢。顺便说一下，我可以接受用不同的方式来完成这个任务，但是这个特定的服务器返回HTML依赖于对另一个服务（带有模糊的API密钥）的调用来获取数据，而且它无法被嵌入到应用程序本身中。你有别的建议吗？这是我的应用程序中唯一需要这种类型的东西的地方（看起来是这样）。 - Stephen

我想我可以返回组成HTML的部分，然后在一个被拆分的模板中将点击处理程序应用于这些部分，你认为这样做会更好吗？ - Stephen

如果你能将模板引入你的组件中，并将组件方法绑定到DOM部分，那么就会好很多（虽然不是最好的，但比较好）。我甚至会创建一个自定义组件，接收HTML路径下载、选择器和处理程序来绑定。 - PiniH