Vue for you

by Joe Cisneros

HTML

<div id="app">
            <input type="text" v-model="search">
            <ol>
                <li v-for="todo in filtered">
                
                <label>
                    <input v-model="todo.done" type="checkbox">

                    <del v-if="todo.done">
                        {{ todo.text }}
                    </del>
                    <span v-else>
                        {{ todo.text }}
                    </span>
                </label>

                </li>
            </ol>
        </div>

CSS

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

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

li {
  margin: 8px 0;
}

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

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

Vue

new Vue({
                el: "#app",
                data: {
                    todos: [
                        { done: false, text: "Learn JavaScript"},
                        { done: false, text: "Learn Vue"},
                        { done: false, text: "Play around in JSFiddle"},
                        { done: false, text: "Build something awesome"}
                    ],
                    search: '',
                },
                methods: {
                    
                },
                computed: {
                    filtered() {
                        return this.todos.filter(todo => {
                            return todo.text.toLowerCase().includes(this.search.toLowerCase())
                        })
                    },
                }
            })