pass in vue data into a component but I have other props too-CodePudding

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?

CodePudding user response：

You should access directly the data returned from the data option and bind it to the prop :

<ComponentName :info="information.item1">

CodePudding user response：

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

https://vuejs.org/guide/essentials/forms.html

CodePudding user response：

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.