使用 Bootstrap-Vue 在导航栏中添加动态头像

Question

我在 Boostrap-Vue 中使用 Navbar 组件，想添加一个头像，头像来自应用程序中的一个变量。问题是我无法将变量绑定到插槽内的头像组件，因为它告诉我 this is null。有可能使这项工作吗？目前，我有以下代码：

    <b-navbar>
      <b-navbar-brand href="#">Dashboard</b-navbar-brand>
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav class="ml-auto">
          <b-nav-item-dropdown
            class="navbar-right"
            toggle-class="nav-link-custom"
            right
          >
            <template #button-content>
              <b-avatar :src="this.avatar" size="sm"></b-avatar>
            </template>
            <b-dropdown-item to="profile">Profile</b-dropdown-item>
            <b-dropdown-item to="support">Support</b-dropdown-item>
            <b-dropdown-item to="logout">Logout</b-dropdown-item>
          </b-nav-item-dropdown>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>

错误是：

    TypeError: this is null

Answer 1

您不需要（也不应该）在 <template> 中使用 this 关键字。

所以你应该只写 :src="avatar".

使用 Bootstrap-Vue 在导航栏中添加动态头像

Add a dynamic avatar in Navbar using Bootstrap-Vue

vue.js

bootstrap-vue