CODEWITHSUNDEEP
javascriptvue.js
Razvan Zamfir
Razvan Zamfir

Reputation: 4686

What causes the duplicated key error in this Vue.js application?

I am working on a small Todo App with Vue 3.

In App.vue I have the 3 child components and the methods:

<template>
  <div id="app">
    <Header/>
    <List/>
    <Footer/>
  </div>
</template>

<script>
import axios from 'axios'
import Header from './components/Header.vue'
import List from './components/List.vue'
import Footer from './components/Footer.vue'

export default {
  name: 'App',
  components: {
    Header,
    List,
    Footer
  },

  props: ['todos'],

  data() {
    return {
      url: "https://jsonplaceholder.typicode.com/todos?&_limit=5",
      dataIsLoaded: false,
      isValidInput: true,
      todos: [],
      unsolvedTodos: [],
      newTitle: "",
    }
  }
}
</script>

In List.vue I have:

<template>
  <div>
    <h1>List</h1>
    <ul class="todo-list" v-if="dataIsLoaded">
      <TodoItem v-for="todo in todos.slice().reverse()" :key="todo.id" v-bind:class="{done: todo.completed}" :todo="todo" />
    </ul>
  </div>    
</template>

<script>

import TodoItem from "./TodoItem.vue";

export default {
  name: 'List',
  components: { TodoItem },
  props: ['todos']
}
</script>

In TodoItem.vue:

<template>
  <li>
    <input type="checkbox" :checked="todo.completed" @change="toggleTodo(todo)" />
    <span class="title">{{todo.title}}</span>
    <button @click="deleteTodo(todo.id)">
        <i class="fa fa-trash" aria-hidden="true"></i>
    </button>
 </li>
</template>

<script>
export default {
  name: 'TodoItem',
  props: ['todo']
}
</script>

The todo list's <h1> heading is displayed, but the unordered list of todos is not.

Introducing props: ['todos'] in App.vue throws the error Duplicated key 'todos'.

What am I missing?

Upvotes: 0

Views: 234

Answers (2)

Half-Blood Geek
Half-Blood Geek

Reputation: 56

On your App.vue you defined props['todos'] and at the same time todos is defined in your data(). That might be the one causing the error.

Upvotes: 4

developernaren
developernaren

Reputation: 514

Looks like you forgot to define dataIsLoaded in List.vue. It either needs to be defined in data or be a computed property.

Upvotes: 1

Related Questions