Как получить доступ к функции vue из onclick в javascript?

Question

Я создаю компонент vue и хочу вызвать функцию, определенную в методах vue, путем вызова атрибута onClick при изменении innerHTML, но это выдает мне ошибку «showModal не определен», как показано ниже:

вот моя функция showModal, я просто пытаюсь утешить некоторые данные, чтобы убедиться, что функция вызывается

methods: {

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

и вот где я пытаюсь вызвать эту функцию в js с помощью функции onclick:

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 Uncaught ReferenceError: showModal не определено в HTMLAnchorElement.onclick ((index): 1)

я называю это неправильно?

Спасибо!

Edit:

Благодаря @Ferrybig знаю, что я могу вызвать функцию, однако у меня есть еще одна проблема, я хочу передать текущее слово, которое я изменяю, его html в функцию следующим образом: onclick = 'myMethod (нарушения [я] ) 'я попытался установить массив this.violations таким глобальным образом:

window.violations=this.violations;

но, опять же, (переменная i), которая является индексом текущего слова в массиве, не является глобальной переменной, которая передается в myMethod, и в ней говорится (я не определен) .. и я не могу установить i в глобальное значение. переменная, потому что ее индекс увеличивается каждый раз в цикле .. я думал об отправке текущего индекса тега, который я редактирую, в функцию «myMethod», чтобы я мог знать, в каком теге я нахожусь, и он известен по html в компоненте vue, но не уверен, как это сделать ..

есть другие предложения?

Answer 1

При использовании шаблонов Vue вы получаете доступ к простым в использовании синтаксисам, сокращающим время программирования, и настоятельно рекомендуется вместо этого начать рендеринг страницы с помощью Vue.

В случае, если вы не может использовать Vue для рендеринга вашей страницы, но вы все равно можете использовать другие плохие методы:

Сначала начните с добавления созданного метода жизненного цикла для созданного, который перемещает ссылку на ваш метод Vue в глобальную область видимости.: created(){window.myMethod =this.myMethod;}

Поскольку мы затем добавили метод в глобальную область видимости, вы можете просто ссылаться на него, используя mymethod внутри вашего обработчика vanilla onclick.

Обратите внимание, что описанный выше обходной путь не поддерживаетнесколько экземпляров вашего компонента Vue, но поддерживать его становится намного сложнее, и в этом случае вам действительно следует использовать надлежащие компоненты Vue.

Answer 2

Вы должны использовать синтаксис 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='#' и вместо этого добавить href="javascript:void(0)" вместе с @ click = "showModal". Это может помочь

Answer 4

Вы не используете обработчик Vue в своем вызове.Измените onclick на @click

так:

@click="showModal"

или, альтернативно,

v-on:click="showModal"