how to fix error The value for a v-bind expression cannot be empty Vue Js

Viewed 10322

Iam tryng in tutorial vue js basic , but i have error on v-bind . i use v-for but having error like this :

    <template>
    <div class="todo-list">
        <todo-items 
        v-for="todo in todos" // error on here
        :title="todo.title"  // here
        :description="todo.description"/> // on here
    </div>
</template>




<script>
import TodoItems from '@/components/TodoItems.vue'
export default {
    components:{
        TodoItems
    },
    props:{
        todos:{
            required:true,
            type:Array
        }
    }

}
</script>

i dont know what happen on my code , but this tutorial is fine and not get error . but my code is have error on v-for

this error is

Errors compiling template:

The value for a v-bind expression cannot be empty. Found in "v-bind:"

can someone tell me about this error ?

1 Answers

The error occurs because the title field of at least one todo object inside the array is undefined or empty.

If you provide the exact structure of the todos array I will update my answer with more details.

Related