JSFiddle - React, Tailwind, and code Playground

by evzens

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <h1 ref="message">{{ message }}</h1>
  <button ref="myButton" @click="clickedButton">Click Me!</button>
  
  <ul>
    <li v-for="n in 10" ref="numbers">{{ n }}</li>
  </ul>
</div>

JavaScript

var vm = new Vue({
	el: '#app',
  data: {
  	message: 'Hello World!'
  },
  methods: {
  	clickedButton: function() {
    	console.log(this.$refs);
      this.$refs.myButton.innerText = this.message;
    }
  }
});

console.log(vm.$refs);

setTimeout(function() {
	vm.$refs.message.innerText = 'This is a test';
}, 2000);

setTimeout(function() {
	vm.message = 'This is another test';
}, 4000);