如何将变量传递给 vue.js 模板中的函数？

Question

I am trying to use a template component in Vue to change the heading of a page to the page title. I am trying to do this by having all of the possible page titles stored in an array in the header-component file. However, I cannot find a way to pass in an index when the component is loaded onto a page.

This is the component in question:

<template id="comp-dem-template">
    <header-component>
        <!-- Insert replacement text in here-->
        <span slot="pagetitle">
            {{ chooseTitle(index) }}
        </span>
    </header-component>
</template>

<script>
module.exports = {
    template: '<h1><slot name="pagetitle">Page Title Fallback</slot></h1>',
    data: function chooseTitle(index) {
        if (index == 0){
            title: 'Index';
        }
        else if (index == 1){
            title: 'Events';
        }
        else if (index == 2){
            title: 'Policy';
        }
        else if (index == 3){
            title: 'Frequently Asked Questions';
        }
        else if (index == 4){
            title: 'Reservations';
        }
        else if (index == 5){
            title: 'View Reservations';
        }
        else{
            title: 'Make a Reservation';
        }
    }
}
</script>

<style>


</style>

And where the component loads from

<template>
  <div class="container">
      <logo />
      <headercomponent />
      <navbar/>
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'
import headercomponent from '~/components/header-component.vue'
import navbar from '~/components/nav-bar.vue'
export default {
  components: {
    Logo,
    headercomponent,
    navbar
  }
}
</script>

<style>

</style>

I want to be able to pass in a "0" somewhere on my Index page, causing the heading to have the text of "Index" , "1" causes "Events" , etc. Is this even possible, or am I barking up the wrong tree?

Answer 1

Try to declare that index as a prop in headercomponent as follows :

<template id="comp-dem-template">
    <header-component>
        <!-- Insert replacement text in here-->
        <span slot="pagetitle">
            {{ title }}
        </span>
    </header-component>
</template>

<script>
module.exports = {
 template: '<h1><slot name="pagetitle">Page Title Fallback</slot></h1>',
 props:['index'],
 data:  {
   if (this.index == 0) { //use this keyword
     title: 'Index';
   }
....

and pass it from the parent component to the child one like:

<template>
  <div class="container">
      <logo />
      <headercomponent index="0" />
      <navbar/>
  </div>
</template>