Question

我正在构建一个vue组件，我想通过在修改innerHTML时调用onClick属性来调用在vue方法中定义的函数，但这会给我显示错误“ 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] ）'，我尝试将this.violations数组设置为像这样的全局变量：

window.violations=this.violations;

但是同样，（变量i）是数组中当前单词的索引，不是要传递给'myMethod'的全局变量，它说（i未定义）..并且我无法将i设置为global变量，因为它的索引每次在循环中都会增加。我考虑过将要编辑的标签的当前索引发送到函数“ myMethod”，这样我就可以知道我所在的标签以及其在vue组件中的html知道的标签，但是不确定如何做。 >

还有其他建议吗？

Answer 1

您未在通话中使用Vue处理程序。将onclick更改为@click

如此：

@click="showModal"

或

v-on:click="showModal"

Answer 2

您必须像Method Event Handlers一样使用Vue语法onClick 所以

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);

Answer 3

您好，只需尝试删除href="javascript:void(0)"并添加preds = lm.predict(X_all)和@ click =“ showModal” 这可能有帮助

Answer 4

使用Vue模板时，您可以访问易于使用的语法，从而减少了编程时间，强烈建议您改用Vue开始渲染页面。

如果您无法使用Vue渲染页面，您仍然可以使用其他不良技巧：

首先，首先添加一个用于创建的已创建生命周期方法，该方法会将Vue方法的引用移至全局范围：created(){window.myMethod =this.myMethod;}

由于我们随后将方法添加到了全局范围，因此您可以在原始的onclick处理程序中使用mymethod来引用它。

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

如何从JavaScript中的onclick访问Vue函数？

4 个答案: