He intentado muchas formas diferentes de hacer esto con alerta () y declaraciones simples if-else, e incluso lo que está en este enlace: https://vuejs.org/v2/cookbook/form-validation.html

¡Pero nada funciona! ¿Qué estoy haciendo mal?

¿Qué hay en mi index.html:

 <div id="app"> <div class = "addTask"> <h1>A List of Tasks</h1> <p v-show="activeItems.length === 0">You are done with all your tasks! Celebrate!</p> <form @submit.prevent="addItem"> <input type="text" v-model="title"> <button type="submit">+</button> </form> </div>

Esto es lo que tengo en scripts.js:

 var app = new Vue({ el: '#app', data () { return { // errors: [], items: [{ userId: 0, id: 0, title: "", completed: false, }], title: '', show: 'all', } }, // Using axios to asynchrously query the API mounted () { axios .get("https://jsonplaceholder.typicode.com/todos") .then(response => this.items = response.data) }, computed: { activeItems() { this.saveItems; return this.items.filter(item => { return !item.completed; }); }, filteredItems() { // An active state denotes the task is not yet completed if (this.show === 'active') return this.items.filter(item => { return !item.completed; }); if (this.show === 'completed') return this.items.filter(item => { return item.completed; }); // This makes it so added tasks go to the top, not bottom return this.items.reverse(); }, }, methods: { addItem() { if(this.items != 0) { this.items.push({ title: this.title, completed: false }) this.title = ""; } else { alert("Please enter a task.") }