D
D
Denis2021-04-25 14:45:04
Vue.js
Denis, 2021-04-25 14:45:04

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

1 answer(s)
0
0xD34F, 2021-04-25
@densis2003

To get the root bean instance, you need the result of mount, not createApp. The documentation could be opened, it is not even necessary to read - looking obliquely, you can stumble upon examples , from which everything is clear.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question