Add a dynamic avatar in Navbar using Bootstrap-Vue

Question

I am using Navbar component within Boostrap-Vue and would like to add an avatar, the picture of which comes from a variable in the app. The problem is that I cannot bind a variable to the avatar component inside a slot, as it tells me this is null. Is it possible to make this work? Currently, I have the following code:

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

The error is:

    TypeError: this is null

Answer 1

You do not (and should not) need to use the this keyword inside your <template>.

So you should just write :src="avatar".