JSFiddle - React, Tailwind, and code Playground

by spitfire378

HTML

<div id="app">
  <div class="wrapper" v-on:click="changeFirstname">
    <p >{{ displayName }}</p>
    <button v-on:click.stop="changeName">Change Name</button>
  </div>
</div>

SCSS

body {
  
}

Vue

new Vue({
  el: '#app',
  data: {
    name: 'Albo',
    firstname: 'Martin'
  },
  computed: {
  	displayName () {
//	    return this.name + ' ' + this.firstname
      return `${this.name} ${this.firstname}`
    }
  },
  methods: {
  	changeName () {
    	this.name = "Alphonse"
    },
    changeFirstname () {
	    this.firstname = "Jean"
    }
  }
})