I recently started learning Vue and decided to follow a video tutorial by Traversy Media on Youtube
In the tutorial, the instructor used v-bind but I struggled to understand its usage.
Despite my efforts, I still find the documentation a bit challenging to grasp.
Here is the code snippet we are working with:
<template>
<div id="app">
<p>{{msg}}</p>
<Todos v-bind:todos="todos" />
</div>
</template>
<script>
import Todos from "./components/todo.vue";
let todo = [
{
name: "Rohit",
title: "Full Stack Developer"
},
{
name: "Varun",
title: "Head of Marketing"
},
];
export default {
name: "app",
components: {
HelloWorld,
Todos
},
data() {
return {
msg: "hello",
todos: todo
};
}
};
</script>
Question:1 Can someone break down this code snippet for me?
<Todos v-bind:todos="todos" />
I am curious about the usage of v-bind and why the value of todos is set as a string. (I understand that todos are being passed to a child component as props)
Furthermore, in the todo.vue file, the instructor does something like this:
<template>
<div v-bind:key="todo.id" v-for="todo in todos">
<h3>{{todo.title}}</h3>
</div>
</template>
<script>
export default {
name: "Todos",
props: ["todos"]
};
</script>
Question:2 I am a bit confused here. Why is an array used in props in the export default statement? props: ["todos"]? Comparatively, in the boilerplate code, they simply specify the data type like this props: {msg: String}. Why use props: ["todos"] in this case?
export default {
name: "HelloWorld",
props: {
//We are defining the message type here
msg: String
}
};
Question 3: Finally, in this particular line:
<div v-bind:key="todo.id" v-for="todo in todos">
<h3>{{todo.title}}</h3>
I understand the purpose of v-bind:key="todo.id", but I am still uncertain about v-bind itself and where it should be used.