Update of Laracasts The Vast World of Vue.js 0.12: At a Glance

Hi. I thought it would be useful to capture my code from walking through the Laracast The Vast World of Vue.js 0.12: At a Glance. It is an archived Laracast, meaning that it is out of date. And because of this, some of the code examples break.  I sought to fix these breakages as I went through the Laracast and I have posted my working code (as at 20161012) here.

Tasks ({{ tasks.length }})

  1. {{ task.body }}

And the code. It is all crammed into one file in the name of convenience and expediency so it is far from best practice! So please, be gentle with me.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Laracasts Vue</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
H1 { color: darkgray}
li button {
font-weight: bold;
background: none;
border: 0;
color: red;
padding: 0;
float: right;
}
#tasks {
width: 400px;
}
</style>

</head>
<body>
<div class="container">
<h1>Laracast Vues Tutorial</h1>
<div id="tasks">
<div>
<h3>Tasks ({{ tasks.length }})</h3>
<ol class="list-group">
<li v-for="(task, index) in tasks"
class="list-group-item">
<span v-on:dblclick="editTask(task, index)">{{ task.body }}</span>
<button v-on:click="removeTask(index)">&#10007;</button>
</li>
</ol>
</div>
<form v-on:submit="addTask">
<div class="form-group">
<input ref="taskInput" v-model="newTask" type="text" class="form-control" placeholder="I need to ..."></input>
</div>
<button class="btn btn-primary">Add task</button>
</form>
</div>
</div>

<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
<script>
new Vue({
el: '#tasks',
data: {
tasks: [
{body: 'one', completed: false},
],
newTask: '',
},

methods: {
addTask: function(e) {
e.preventDefault();
this.tasks.push({
body: this.newTask,
completed: false
});
this.newTask = '';
},
removeTask: function(taskIndex) {
this.tasks.splice(taskIndex, 1);
},
editTask: function(task, taskIndex) {
this.removeTask(taskIndex);
this.newTask = task.body;
this.$refs.taskInput.focus();
// this
}
}
})
</script>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>