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>
<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">
H1 { color: darkgray}
li button {
font-weight: bold;
background: none;
border: 0;
color: red;
padding: 0;
float: right;
#tasks {
width: 400px;

<div class="container">
<h1>Laracast Vues Tutorial</h1>
<div id="tasks">
<h3>Tasks ({{ tasks.length }})</h3>
<ol class="list-group">
<li v-for="(task, index) in tasks"
<span v-on:dblclick="editTask(task, index)">{{ task.body }}</span>
<button v-on:click="removeTask(index)">&#10007;</button>
<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>
<button class="btn btn-primary">Add task</button>

<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>
new Vue({
el: '#tasks',
data: {
tasks: [
{body: 'one', completed: false},
newTask: '',

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