Answer the question
In order to leave comments, you need to log in
VUE 3 how to call method from vanilla js?
The main question is how to pull a method from a VUE 3 component from an external function on vanilla js
before on version VUE 2.6 everything worked was available through a global variable
after switching to VUE 3, with their proxies, there is no access or under some kind of flag ???
may have missed something.
I attach the code
https://codepen.io/densis2003/pen/KKaJeME
<h1> Hello World!</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<section id="apptest">
{{countclick}}
<button v-on:click="CountAdd">VUE click +</button>
</section>
<button id="VanilaClick1">Vanila 2 click +</button>
<button id="VanilaClick2">Vanila 4 click +</button>
/*Загрузка главного шаблона VUE с данными */
const appPerelet = {
data() {
return {
'countclick':0
}
},
methods: {
CountAdd:function(item)
{
item=item>0?item:1;
this.countclick=this.countclick+item;
}
},
created: function()
{
var ppVuePerelet=this;
document.getElementById("VanilaClick1").addEventListener('click', function (evt) {
ppVuePerelet.CountAdd(2);
});
}
};
appVuePerelet=Vue.createApp(appPerelet);
appVuePerelet.mount('#apptest');
document.getElementById("VanilaClick2").addEventListener('click', function (evt) {
//console.log(appVuePerelet);
appVuePerelet.CountAdd(4); // РАботало на vue 2.6
/*
Как обратиться к методу CountAdd на VUE v.3.11 ?
*/
});
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question