JSFiddle - React, Tailwind, and code Playground

by Federico

HTML

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

<div id="app">
  <p>{{ counter }}</p>
  <!-- <p>{{ getFullName() }}</p> -->
  <!-- <p><p>{{ fullNameOld }}</p> -->
  <p>{{ fullNameNew }}</p>
  <button v-on:click="counter++">Increase Counter</button>
  <button v-on:click="changeName">Change name</button>
  <button v-on:click="changeNameSetter">Change name (setter)</button>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
    counter: 1,
    firstName: 'Bo',
    lastName: 'Andersen'
  },
  computed: {
  	fullNameOld: function() {
    	alert("Assembling full name...");
    	return this.firstName + ' ' + this.lastName;
    },
    fullNameNew: {
        get: function() {
            alert("Assembling full name...");
            return this.firstName + ' ' + this.lastName;
        },
        set: function(newValue) {
            alert("Setting new name: " + newValue);
            var parts = newValue.split(' ')
    	    this.firstName = parts[0];
            this.lastName = parts[parts.length - 1];
        }
    }
  },
  methods: {
  	getFullName: function() {
    	alert("Assembling full name...");
    	return this.firstName + ' ' + this.lastName;
    },
    changeName: function() {
        this.firstName = 'Federico';
        this.lastName = 'Taddei';
    },
    changeNameSetter: function() {
        this.fullNameNew = "Margherita Taddei";
    }
  }
});