JSFiddle - React, Tailwind, and code Playground

by larsi

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div>
  <h1>
  {{ game.name }}
  </h1>
  <div v-if="!joined">
  <button @click="join()">
  Join
  </button>
  
  </div>

</div>

JavaScript

var gameStorage = {
		load:function(){
    		return {
        		name:'test1',
            locations:[
              {lat:10,lng:10,data:'A', done:false},
              {lat:10,lng:10,data:'B', done:false},
              {lat:10,lng:10,data:'C', done:false}
            ]
        }
    }
};


// app Vue instance
var app = new Vue({
  // app initial state
  data: {
    game: gameStorage.load(),
    myPos: null,
    joined:false
  },

  // watch todos change for localStorage persistence
  watch: {
    myPos: {
      handler: function (myPos) {
        console.log('mypos changed', myPos);
      },
      deep: true
    }
  },

  // computed properties
  // http://vuejs.org/guide/computed.html
  computed: {
    remaining: function () {
      return this.game.locations.length;
    }
  },

  // methods that implement data logic.
  // note there's no DOM manipulation here at all.
  methods: {
  	join: function() {
    	this.joined=true;
    },
  }
  });