Как динамически изменить название пункта меню в Vue

Question

У меня есть компонент DocumentRegistration , но я использую его не только для регистрации, но и для редактирования документов.Также у меня есть Навигация компонент

<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>

Где Регистрация документов - это название самого пункта меню.Как я могу изменить это имя динамически при переходе к doc-registration в зависимости от действия edit или регистрации?

Answer 1

Попробуйте использовать «watch» и «data»

Сначала вы создаете переменную данных, например

1. editMode (это просто флаг состояния)

И

menuItemName (Это только для поля метки маршрутизатора = Регистрация документа)

и смотрите editMode

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

Теперь вы просто меняете переменную editMode, когда хотите ее изменить.