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

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 組件並使用它們。