Struggling to pass data to props and render different content in a component on each page? Want to display links, tech, feedback without deleting the component or rewriting code for individual pages? Existing methods not working for you? Unsure if what you're attempting is feasible?
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>