Question

我有一个 DocumentRegistration 组件，但它不仅用于注册，还用于编辑文档。我还有一个 Navigation 组件

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

Document Registration 是其自身菜单项的名称。在根据操作编辑或注册导航到doc-registration时，如何动态更改此名称？

Answer 1

尝试使用“监视”和“数据”

首先，创建数据变量

editMode（只是状态标志）

AND

menuItemName（仅用于路由器标签字段= Document Registration）

并观看editMode

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

现在，您只需更改editMode变量即可。

如何在Vue中动态更改菜单项名称

1 个答案: