benjaminoakes/vue_sandbox.html

## vue_sandbox.html
<!DOCTYPE html>
<html>
  <head>
    <title>Vue.js Sandbox</title>
  </head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <button @click="checkAll">Check all</button>
  <button @click="toggleAll">Toggle all</button>

  <p>
    Completed: {{completedCount}}
  </p>

  <div>
    <template v-for="task in tasks">
      <input type="checkbox" v-model="task.completed" />
      <label>{{ task.text }}</label>
      <br />
    </template>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    tasks: [
      {
        text: "Take out recycling",
        completed: false,
      },
      {
        text: "Charge car",
        completed: false,
      }
    ]
  },
  computed: {
    completedCount: function () {
      return this.tasks.filter(function (task) { return task.completed; }).length;
    }
  },
  methods: {
    checkAll: function () {
      this.tasks = this.tasks.map(function (task) {
        task.completed = true;
        return task;
      });
    },
    toggleAll: function () {
      this.tasks = this.tasks.map(function (task) {
        task.completed = !task.completed;
        return task;
      });
    }
  }
})
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Vue.js Sandbox</title>
	</head>
	<body>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>

	<div id="app">
	<button @click="checkAll">Check all</button>
	<button @click="toggleAll">Toggle all</button>

	<p>
	Completed: {{completedCount}}
	</p>

	<div>
	<template v-for="task in tasks">
	<input type="checkbox" v-model="task.completed" />
	<label>{{ task.text }}</label>
	<br />
	</template>
	</div>
	</div>

	<script>
	new Vue({
	el: '#app',
	data: {
	message: 'Hello Vue.js!',
	tasks: [
	{
	text: "Take out recycling",
	completed: false,
	},
	{
	text: "Charge car",
	completed: false,
	}
	]
	},
	computed: {
	completedCount: function () {
	return this.tasks.filter(function (task) { return task.completed; }).length;
	}
	},
	methods: {
	checkAll: function () {
	this.tasks = this.tasks.map(function (task) {
	task.completed = true;
	return task;
	});
	},
	toggleAll: function () {
	this.tasks = this.tasks.map(function (task) {
	task.completed = !task.completed;
	return task;
	});
	}
	}
	})
	</script>
	</body>
	</html>