Основной вопрос как из внешней функции на vanilla js дернуть метод из компонента VUE 3
раньше на версии VUE 2.6 все работало был доступно через глобальную переменную
после перехода на VUE 3 , с их проксями , доступа нет лили под флагом каким-то ???
может что-то пропустил .
код прилагаю
https://codepen.io/densis2003/pen/KKaJeME
<h1> Hello World!</h1>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/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;
}
