Tiles as Components

by Rob Cameron

HTML

<script id="todos" type="text/x-template">
  <ol>
    <li
      is="todo"
      v-for="todo in todos"
      :todo="todo"
      :key="todo.id"
    ></li>
  </ol>
</script>
<script id="todo" type="text/x-template">
	<li style="border: 1px solid #cccccc; width: 150px; height: 150px; display: inline-block;">
      {{ todo.text }}
      <button @click="onFollow">Follow</button>
  </li>
</script>

<div id="app">
  <h2>Todos:</h2>
  <todos :todos="todos"></todos>
  <ul v-if="isLoading">
    <li style="background-color: #cccccc; width: 150px; height: 150px; display: inline-block;">&nbsp;</li>
    <li style="background-color: #cccccc; width: 150px; height: 150px; display: inline-block;">&nbsp;</li>
    <li style="background-color: #cccccc; width: 150px; height: 150px; display: inline-block;">&nbsp;</li>
    <li style="background-color: #cccccc; width: 150px; height: 150px; display: inline-block;">&nbsp;</li>
  </ul>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.blank {
  background-color: #cccccc;
  width: 150px;
  height: 150px;
  display: inline-block;
  margin: 5px;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

var todoComponent = {
  template: '#todo',
  props: ['todo'],
  methods: {
    onFollow: function() {
      // ajax call to follow
      // replace JSON
      this.todo.text = "Followed"
      console.log('follow!')
      console.log(this.todo)
    }
  }
}

var todosComponent = {
  template: '#todos',
  props: ['todos'],
  components: {
    'todo': todoComponent
  }
}

var vm = new Vue({
  el: "#app",
  data: {
    todos: [],
    isLoading: true
  },
  methods: {
  	addResults: function(data) {
      this.todos = data;
      this.isLoading = false;
    }
  },
  components: {
    'todos': todosComponent
  }
})

setTimeout(function() {
  vm.addResults([
    { id: 1, text: "Learn JavaScript", done: false },
    { id: 2, text: "Learn Vue", done: false },
    { id: 3, text: "Play around in JSFiddle", done: true },
    { id: 4, text: "Build something awesome", done: true }
  ])
}, 1000)

/* setTimeout(function() {
  vm.isLoading = true;
}, 2000)

setTimeout(function() {
  vm.addResults([
    { username: "rob", text: "Learn JavaScript", done: false },
    { username: "jon", text: "Learn Vue", done: false },
    { username: "norma", text: "Play around in JSFiddle", done: true },
    { username: "brandon", text: "Build something awesome", done: true }
  ])
}, 3000) */