How to dynamically change menu item name in Vue

Question

I have a component DocumentRegistration , but use it not only for registration but also for editing documents. Also I have a Navigation component

<template>
  <div>
    <b-navbar
      toggleable="sm"
      class="mb-4"
      type="dark"
      variant="dark">
      <b-navbar-toggle target="nav_collapse"/>
      <b-navbar-brand href="/">PDN</b-navbar-brand>
      <b-collapse
        id="nav_collapse"
        is-nav>
        <b-nav pills>
          <router-link
            to="persons"
            class="nav-item nav-link"
            active-class="active">Persons</router-link>
          <router-link
            to="doc-registration"
            class="nav-item nav-link"
            active-class="active">Document Registration</router-link>
          <router-link
            to="documents"
            class="nav-item nav-link"
            active-class="active">Documents</router-link>
        </b-nav>
        <b-navbar-nav class="ml-auto">
          <b-nav-item-dropdown
            v-if="$auth.check()"
            right>
            <template slot="button-content">
              <em id="username">{{ $auth.user().name }}</em>
            </template>
            <b-dropdown-item href="#">Профиль</b-dropdown-item>
            <b-dropdown-item
              href="#"
              @click="$auth.logout()">Выйти</b-dropdown-item>
          </b-nav-item-dropdown>
          <b-nav-item
            v-else
            id="login-nav"
            href="#"
            @click="$refs.loginModal.show()">
            Войти
          </b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
    <login
      id="login-modal"
      ref="loginModal" />
  </div>
</template>

<script>
import Login from '../Auth/components/Login'
export default {
  components: {
    Login
  }
}
</script>

Where Document Registration is name of itself menu item. How can i change this name dynamically when navigate to doc-registration depending on the action edit or registration?

Answer 1

Try to use "watch" and "data"

First, you create data variable like

1. editMode(it just status flag)

AND

2. menuItemName(It just for router label field = Document Registration )

and watch the editMode

watch: {
  editMode(val) {
   if (val === 'edit') {
    this.menuItemName = 'Document Edit';
   } else if (val === 'create') {
    this.menuItemName = 'Document Registration';
   }
  },
}

Now you just change editMode variable when you want to change it.