CODEWITHSUNDEEP
javascriptvue.jscomponentssingle-page-application
asdfghjklm
asdfghjklm

Reputation: 643

Passing data to single file Vue component

I'm having trouble getting my data to pass to props. Basically, I want to re-render this component on each page, but the content within the component should be different. Like the links, tech, feedback. So I am trying to find a way to pass that information to the component in a way that it will display without me having to delete the component and just write this on individual pages. I have looked through questions already but none of the methods seem to work. Maybe what I'm trying to do is not possible?

component.vue

<template>
<el-collapse v-model="activeName" @change="handleChange" accordion>
    <el-collapse-item title="Links" v-model="links">
        <center>{{ this.links }}</center>
        </el-collapse-item>
        <el-collapse-item title="Tech" name="2" prop-name="techlist" v-model="techlist">
            <div v-for="o in this.techlist" :key="o" class="text item" >
                {{ o }}
            </div>
        </el-collapse-item>
        <el-collapse-item title="Feedback" name="3" v-model="feedback">
            {{ this.feedback }}
        </el-collapse-item>
    </el-collapse>
</template>


<script>
export default {
    props: ['links', 'techlist', 'feedback']
}
</script>

page.vue

<template>
    <div>
        <el-row class="bg-row" type="flex" justify="end">
            <el-col span="6">
                <v-menu>
                </v-menu>   
            </el-col>
        </el-row>
    </div>           
</template>

<script>
import Menu from 'components/Menu'

export default {
  name: 'page2',
     data() {
      return {
          techlist: ["tech1", "tech2","tech3"],
          links: "<center><a href='page1'>Github</a><br><a href='page2'>heroku</a></center>",
          feedback: '<div>Basically just a placehold for feature I will add to the site later on.</div>'
        }
    },
    components: {
        'v-menu': Menu
    },
}
</script>

Upvotes: 2

Views: 1223

Answers (1)

skribe
skribe

Reputation: 3615

You are defining your props correctly on the component itself but you are not binding or passing them to the component from the parent. In the parent you need to add them like this.

<v-menu :links="links" :techlist="techlist" :feedback="feedback"></v-menu>

The :links part will be the name you use the in the props:['links'] the ="links" part is the name of the data property, method, or computed property defined in the parent. So you could do something like :links="getLinks()" where that is a method that returns all links.

https://v2.vuejs.org/v2/guide/components.html#Props

Upvotes: 1

Related Questions