javascriptvue.jsprop

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


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?


Solution

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

    <ComponentName :info="information.item1">