I am starting with Vue and following the video tutorial by Traversy Media on Youtube
There he have used v-bind but I didn't proper explained what are they (or at-least I am unable to get it)
For some reason, I still find documentation slightly hard to prehend.
So this is what we are doing.
<template>
<div id="app">
<p>{{msg}}</p>
<Todos v-bind:todos="todos" />
</div>
</template>
<script>
import Todos from "./ponents/todo.vue";
let todo = [
{
name: "Rohit",
title: "Full Stack Developer"
},
{
name: "Varun",
title: "head of marketing"
},
];
export default {
name: "app",
ponents: {
HelloWorld,
Todos
},
data() {
return {
msg: "hello",
todos: todo
};
}
};
</script>
Question:1 Can someone please prehend this piece of code
<Todos v-bind:todos="todos" />
like what is v-bind and why we are keeping value of todos equal to string? (I understand that ultimately he is passing todos to child ponent as props)
And then in todo.vue, he is doing 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 This is where things get pretty scary for me. To start,
In export default, why would he used an array in props? props: ["todos"]? from the boiler plate code where they pass a string they just did something like this props: {msg: String} so why props: ["todos"] here?
export default {
name: "HelloWorld",
props: {
//We are defining the message type here
msg: String
}
};
Question 3: Lastly in this line right here
<div v-bind:key="todo.id" v-for="todo in todos">
<h3>{{todo.title}}</h3>
I understand the reason behind doing this v-bind:key="todo.id" but then again what is v-bind? where do we use it?
I am starting with Vue and following the video tutorial by Traversy Media on Youtube
There he have used v-bind but I didn't proper explained what are they (or at-least I am unable to get it)
For some reason, I still find documentation slightly hard to prehend.
So this is what we are doing.
<template>
<div id="app">
<p>{{msg}}</p>
<Todos v-bind:todos="todos" />
</div>
</template>
<script>
import Todos from "./ponents/todo.vue";
let todo = [
{
name: "Rohit",
title: "Full Stack Developer"
},
{
name: "Varun",
title: "head of marketing"
},
];
export default {
name: "app",
ponents: {
HelloWorld,
Todos
},
data() {
return {
msg: "hello",
todos: todo
};
}
};
</script>
Question:1 Can someone please prehend this piece of code
<Todos v-bind:todos="todos" />
like what is v-bind and why we are keeping value of todos equal to string? (I understand that ultimately he is passing todos to child ponent as props)
And then in todo.vue, he is doing 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 This is where things get pretty scary for me. To start,
In export default, why would he used an array in props? props: ["todos"]? from the boiler plate code where they pass a string they just did something like this props: {msg: String} so why props: ["todos"] here?
export default {
name: "HelloWorld",
props: {
//We are defining the message type here
msg: String
}
};
Question 3: Lastly in this line right here
<div v-bind:key="todo.id" v-for="todo in todos">
<h3>{{todo.title}}</h3>
I understand the reason behind doing this v-bind:key="todo.id" but then again what is v-bind? where do we use it?
- you could find more details here vuejs/v2/guide/#Declarative-Rendering – Boussadjra Brahim Commented Feb 9, 2019 at 9:46
- @BoussadjraBrahim Thanks for the ment. I did mention I was unable to prehend from official docs like what does this mean keep this element’s title attribute up-to-date with the message property on the Vue instance. like if someone could explain me in a stretch what v-bind do? – Alwaysblue Commented Feb 9, 2019 at 9:54
- As a tip you might want to checkout one of these YT channels as well: youtube./channel/UCSJbGtTlrDami-tDGPUV9-w and youtube./channel/UCW5YeuERMmlnqo4oq8vwUpg they have some great Vue tutorials – SuperDJ Commented Feb 9, 2019 at 10:01
- @SuperDJ I love Both these channels. I learned React from Accadmedia Udemy Course but unfortunately they are very stretchy and I having some time constraints – Alwaysblue Commented Feb 9, 2019 at 10:09
1 Answer
Reset to default 8Q1
In Vue you can pass props to child ponents. If you would have used: todos="todos". todos prop would be equal to the string todos however with v-bind:todos or in short :todos it makes the prop the javascript variable todos. Which is the todos from the data function
Q2
In vue you can reference the props in different ways. Declaring them in an array is just shorter but has a drawback which is that you can't validate the props. When declaring the props in an object you can specify the type of the prop eg. String, Array, Object etc. It's also possible to declare a default and specifiy required props.
props: {
msg: {
type: String,
required: true,
default: ''
}
}
Q3
The example provided won't work as there is no id in the let todo just name and title. So what would work is:
<div v-bind:key="i" v-for="(todo, i) in todos">
Again it's possible to just use :key="i". The key could be seen as an id. It's used so Vue knows which element is which in a loop.