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：无法找到变量：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组件并改为使用它们。

Vue.js从动态html调用方法

1 个答案: