I've tried many different ways to do this with both alert() and simple if-else statements, and even what is at this link: https://v2.vuejs.org/v2/cookbook/form-validation.html
But nothing works! What am I doing wrong?
What is in my 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>
This is what I have in 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.")
}
