I have data in App.vue that looks like this:
data() {
return {
information: {
item1: 'item 1 string',
item2: 'item 2 string',
item3: 'item 3 string'
}
}
},
I want to pass this info into a component like this:
<ComponentName prop="something-else" info=this.data.information.item1 />
But I don't get the data, I just get the string..?
Passing data to components in vue.js
SO I go:
<ComponentName prop="something-else" :info=this.data.information.item1>
But my whole page goes blank
Vue JS 3: How to pass data from one component to another other?
I'm a little bit confused by this one but then I found
Passing the data into component in vuejs
So I added basically like, a static method
<ComponentName prop="something-else" information=information.item1>
methods: {
information() {
this.information.item1 = information.item1
}
},
But I get an error about duplicated key and a no-undef error.
How do you pass data from vue into a component?
You should access directly the data returned from the data option and bind it to the prop :
<ComponentName :info="information.item1">
When writing with HTML, you never write data, this, methods or computed. You just write the data, method, computed property directly etc.
<ComponentName :info=information.item1 />
You get an duplicate key error because your method information already exist as an property key inside your data
With : you bind something. Without : you just pass an string
I mean, by just looking at the examples you should figure it out that they never use data or this inside the template
I think what you need to do is register the props.
For Example.
The Vue component
<componentName :lists="lists"></componentName>
Then in your component register the props
props: ['lists'],
data() {
return {
information: {
item1: 'item 1 string',
item2: 'item 2 string',
item3: 'item 3 string'
}
}
}
Let me know if this helps you.