如何从JavaScript的onclick事件中访问vue函数？

Question

我正在构建一个Vue组件，我想通过修改innerHTML时调用Vue methods中定义的函数来调用onClick属性。 然而，它给我报错，如下所示："showModal未定义"

这是我的showModal函数，我只是尝试打印一些数据以确保函数被调用：

methods: {

      showModal: function() {
            console.log("function is called")
            //this.$refs.myModalRef.show();
            //this.account=account;
        }
}

这里我正在尝试通过onclick函数调用js中的该函数：

var inputText = document.getElementById("fileContents");
        var innerHTML = inputText.innerHTML;
 for(var i=0;i<this.violations.length;i++){

          var index=innerHTML.indexOf(this.violations[i]);
          if(index>0) {
            innerHTML = innerHTML.substring(0, index) +"<a href='#' onclick='showModal'>"+ "<span  style=\"background-color: yellow\">" + innerHTML.substring(index, index + this.violations[i].length) + "</span>" + "</a>" + innerHTML.substring(index + this.violations[i].length);

            inputText.innerHTML = innerHTML;
          }

        }

错误：（索引）：1未捕获的引用错误：showModal未定义 在HTMLAnchorElement.onclick ((index):1)

我是不是以错误的方式调用它了？

谢谢！

编辑：

感谢@Ferrybig-我知道我可以调用该函数，但我还有另一个问题； 我想像这样将我正在更改其html的当前单词传递给函数： onclick ='myMethod(violations[i])'我尝试将此.violations数组设置为全局，例如：

window.violations=this.violations;

但是，(变量i)是数组中当前单词的索引，它不是全局变量可以传递给'myMethod'函数，并且会显示（i未定义）。我无法将i设置为全局变量，因为它是在循环中每次递增的索引。 我考虑将我正在编辑的标记的当前索引发送到函数'myMethod'中，以便我可以跟踪我所在的标记及其由vue组件中的html知道，但不确定如何实现..

有其他建议吗？

- Esraa Saad

---

根据添加到DOM的方式，带有onclick事件的链接可能不会被Vue解释，并且onclick事件将不会触发。尝试使用vue.js向您的页面添加链接：<div v-for="v in violations"><a @click="showModal">text</a></div>。 - ebbishop

Answer 1

使用Vue模板时，您可以获得易于使用的语法，这有助于减少编程时间，因此强烈建议您开始使用Vue进行页面渲染。

如果您无法使用Vue来渲染页面，则仍然可以使用其他错误的技术：

首先，添加一个created生命周期方法，将Vue方法的引用移至全局作用域：created(){window.myMethod =this.myMethod;}

由于我们将该方法添加到了全局作用域中，因此您可以在纯onclick处理程序中使用mymethod来引用它。

请注意，上述解决方法不支持您的Vue组件的多个实例，但是要支持这种情况会更加困难，因此您应该真正使用适当的Vue组件。

- Ferrybig

---

仍然不起作用 :( 我做了这个：created(){window.showModal=this.showModal;} ......var test= document.getElementById("test"); var innerHTML2=test.innerHTML; innerHTML2="<a href='#' onclick='showModal'>"+"test"+"</a>"; test.innerHTML=innerHTML2;// 我创建了一个测试 <div>，其中包含一个单词，以便更轻松地进行测试 - Esraa Saad

嗨，现在它正在工作。我只需要像这样调用时写上()：onclick='myMethod()'，但我现在又有另一个问题，请参见我的更新帖子。 - Esraa Saad

由于InnerHtml是一个字符串，您可以直接将其值写入字符串中："<a onclick=\\"method(violations[" + i + "])\\">"。但这真的变得很复杂，我建议您搜索一种使用普通Vue循环来完成此操作的方法。 - Ferrybig

Answer 2

嗨，尝试删除href='#'并改为添加href="javascript:void(0)"以及@ click="showModal"。这可能会有所帮助。

- Mayuri Pansuriya

Answer 3

你的调用中没有使用Vue处理程序。将onclick更改为@click

所以：

@click="showModal"

或者，作为替代方案，

v-on:click="showModal"

- Len Joseph

---

我尝试了两种方法，现在不再出现错误，但当我按下某个单词以调用onclick函数时，页面会将我带到页面的开头（页面向上滚动），并且它不会输出任何内容，这意味着仍然没有调用该函数。 - Esraa Saad

Answer 4

你必须使用Vue语法onClick，例如Method Event Handlers

innerHTML = innerHTML.substring(0, index) +"<a href='#' onclick='showModal'>"+ "<span  style=\"background-color: yellow\">" + innerHTML.substring(index, index + this.violations[i].length) + "</span>" + "</a>" + innerHTML.substring(index + this.violations[i].length);

需要更改为

innerHTML = innerHTML.substring(0, index) +"<a href='#' v-on:click="showModal">"+ "<span  style=\"background-color: yellow\">" + innerHTML.substring(index, index + this.violations[i].length) + "</span>" + "</a>" + innerHTML.substring(index + this.violations[i].length);

- Rua Tahi