I'm having trouble creating a ToDo-list using Vue.js

user_14945188 0
Viewed 73

I want to delete an item when clicking a button, but it just doesn't delete the item.

Here's my code:

new Vue({
  el: "#app",
  data: {
    newItem: "Hello Vue.js!",
    items: []
  },
  methods: {
    addItem: function() {
      this.items.push({
        id: this.items.length + 1,
        name: this.newItem,
        completed: false
      })
      this.newItem = '';
    },
    toggleCompleted: function(item) {
      item.completed = !item.completed;
    }
  },
  deleteItem: function(itemID) {
    this.items.splice(itemID, 1);
  }
})
body {
  background: whiteGhost;
  text-align: center;
}

h1 {
  color: #2c3e50;
  font-family: Avenir;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #1b2d40;
}

h3 {
  color: #222;
  font-family: Avenir;
  font-size: 15px;
  margin-top: -15px;
}

input {
  border-radius: 2px;
  font-family: Avenir;
  text-align: center;
}

button {
  border: outset rgb(20, 134, 245) 2px;
  border-radius: 50px;
  background: dodgerBlue;
  color: #2c3e50;
  padding: 0 8px 0 8px;
}

#deleteBtn {
  border: solid rgb(168, 24, 24) 1px;
  border-radius: 50px;
  background: fireBrick;
  color: #2c3e50;
  font-family: Avenir;
  padding: 1px 5px 0 5px;
}

#app {
  width: 100%;
  height: 100%;
  background: linear-gradient( -45deg, darkViolet, darkViolet, darkViolet, violet, violet);
  border-radius: 5px;
  background-size: 300% 200%;
  box-shadow: 5px 10px #ccc;
  animation: gradient 14s infinite linear;
  padding-bottom: 5px;
}

@keyframes gradient {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 0;
  }
}

p {
  font-family: Avenir;
}

button:disabled {
  opacity: 0.5;
}

.completed {
  text-decoration: line-through;
  opacity: 0.5;
}

#deleteBtn,
p {
  display: inline;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

<div id="app">
  <h1>ToDo-list</h1>
  <h3>Organize your tasks!</h3>
  <input v-model="newItem" placeholder="I have to..."> <button @click="addItem" :disabled="newItem.length === 0">Add</button><br>
  <div v-for="item in items">
    <p :class="{completed : item.completed}" @click="toggleCompleted(item)">{{ item.name }}</p> <button id="deleteBtn" @click="deleteItem(item.id)"> X</button>
  </div>
</div>

vue.js javascript
2 Answers

Two things wrong with your code:

  1. Your deleteTodo method isn't inside methods.
  2. Your item ID isn't the correct index to splice from as it's this.items.length + 1.

Fix these issues and it should work.

Here's an example using filter instead of splice:

new Vue({
  el: "#app",
  data: {
    newItem: "Hello Vue.js!",
    items: []
  },
  methods: {
    addItem: function() {
      this.items.push({
        id: this.items.length + 1,
        name: this.newItem,
        completed: false
      })
      this.newItem = '';
    },
    toggleCompleted: function(item) {
      item.completed = !item.completed;
    },
    deleteItem: function(index) {
      this.items = this.items.filter((el, i) => i !== index)
    }
  },
})
body {
  background: whiteGhost;
  text-align: center;
}

h1 {
  color: #2c3e50;
  font-family: Avenir;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #1b2d40;
}

h3 {
  color: #222;
  font-family: Avenir;
  font-size: 15px;
  margin-top: -15px;
}

input {
  border-radius: 2px;
  font-family: Avenir;
  text-align: center;
}

button {
  border: outset rgb(20, 134, 245) 2px;
  border-radius: 50px;
  background: dodgerBlue;
  color: #2c3e50;
  padding: 0 8px 0 8px;
}

#deleteBtn {
  border: solid rgb(168, 24, 24) 1px;
  border-radius: 50px;
  background: fireBrick;
  color: #2c3e50;
  font-family: Avenir;
  padding: 1px 5px 0 5px;
}

#app {
  width: 100%;
  height: 100%;
  background: linear-gradient( -45deg, darkViolet, darkViolet, darkViolet, violet, violet);
  border-radius: 5px;
  background-size: 300% 200%;
  box-shadow: 5px 10px #ccc;
  animation: gradient 14s infinite linear;
  padding-bottom: 5px;
}

@keyframes gradient {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 0;
  }
}

p {
  font-family: Avenir;
}

button:disabled {
  opacity: 0.5;
}

.completed {
  text-decoration: line-through;
  opacity: 0.5;
}

#deleteBtn,
p {
  display: inline;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

<div id="app">
  <h1>ToDo-list</h1>
  <h3>Organize your tasks!</h3>
  <input v-model="newItem" placeholder="I have to..."> <button @click="addItem" :disabled="newItem.length === 0">Add</button><br>
  <div v-for="(item, index) in items">
    <p :class="{completed : item.completed}" @click="toggleCompleted(item)">{{ item.name }}</p> <button id="deleteBtn" @click="deleteItem(index)"> X</button>
  </div>
</div>

user_127019490

You have an extra closing curly brace after the toggleCompleted method, so deleteItem isn't declared in the methods block.

user_138780710
Related