JSFiddle - React, Tailwind, and code Playground

by Ironim Morar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script type="text/x-template" id="mytemplate">
   <div><span>Vanzari la {{ lastup }}</span>
  <button @click="counter++">{{ counter }}</button></div>
</script>

<div id="app">
  <div>{{ lastup }}
    {{ counter }}
  </div>
  <lastupdate :lastup="lastup"></lastupdate>
  </div>
  
 <div id="app2">
  <button v-on:click="updateData">Update sales</button>
  </div>
 
  
</div>

JavaScript

Vue.component('lastupdate', {
  name: 'lastupdate',
  template: '#mytemplate',
  props:['lastup'],
 /*  data: function() {
      return {
        lastup: "init",
        counter: 3
      }
    }   */
  
 });


var vm = new Vue({
  el: '#app',
   data: () => ({
    lastup: 'iro 1',
    counter :2
  })
});

var vm2 = new Vue({
 el:'#app2',
   methods:{
  	updateData: function(e) {
    	console.log(this.lastup);
      vm.lastup = Math.random();
        }
    }
 
})


console.log(vm);

// vm.updateData();

// vm.lastup = "test";
/* Vue.nextTick(function() {
  alert(vm.$el.textContent);
}); */