[Vuejs]-How to use component templates when creating a Nuxt app?

by

0👍

Your component has a lot of garbage, let’s clean a little,

<template>
  <span class="header-link">
    {{ title }}
  </span>
</template>

<script>
  module.exports = {
   name: 'header-component',
   props: ['title']
  }
</script>

<style>
  .header-link {
  }
</style>

You can call them using:

<header-component title="some text" />

in this way you keep the code clear and simple, but if you absolutely need send a index value here the component:

<template>
  <span class="header-link">
    {{ title }}
  </span>
</template>

<script>
module.exports = {
  name: 'header-component',
  props: ['index'],
  data: function() {
    return {
      title: ''
  }
},


mounted: function() {
    if (this.index === 0) {
      this.title = 'Index'
    } else if (this.index === 1) {
      this.title = 'Events'
    } else if (this.index === 2) {
      this.title = 'Policy'
    } else if (this.index === 3) {
      this.title = 'Frequently Asked Questions'
    } else if (this.index === 4) {
      this.title = 'Reservations'
    } else if (this.index === 5) {
      this.title = 'View Reservations'
    } else {
      this.title = 'Make a Reservation'
    }
  }
}
</script>

<style>
.header-link {
}
</style>

use them like your example

<headercomponent index="0" />

the important part is understand the vue lifecycle, https://v2.vuejs.org/v2/api/#Options-Lifecycle-Hooks, so Props not exist directly in data, but exist in mounted.

Leave a comment