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> 

但是當我嘗試，我得到：

ReferenceError: Can't find variable: myFunction

Answer 1

這尖叫壞PRACTIC到處都是。

如果我不得不這樣做：

我的功能添加到全球範圍內（不好的做法），並從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組件，並改用它們。