javascript - Vue.js 从动态 html 调用方法

Question

我有一个从服务器发送下来的 html block ，我想从该 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>

但是当我尝试时，我得到:

ReferenceError: Can't find variable: myFunction

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 组件并改用它们。