0

I have an avatar image, upon click I'd like to route to one of my paths. I understand I can do it with router-view, but also that vuetify inherits its properties.

What is missing?:

<div id="app">
  <v-app>
    <v-app-bar>
      <v-toolbar-items>
      <v-avatar to="'/profile'">
        <v-img src="http://www.dumpaday.com/wp-content/uploads/2019/10/00-156-750x280.jpg"></v-img>
      </v-avatar>
      </v-toolbar-items>
    </v-app-bar>
  </v-app>
</div>

full example:

https://codepen.io/toit123/pen/GRRmpqq

dreijntjens
  • 4,577
  • 26
  • 28
toto333
  • 79
  • 1
  • 6
  • I didn't get your question. What exactly are you trying to ask? – Yashu Mittal Oct 24 '19 at 08:20
  • My example shows a failed use of the ":to" property, as in Must there be a way to use "to" within the "v-avatar" component, right? – toto333 Oct 24 '19 at 08:34
  • duplicated with: https://stackoverflow.com/questions/57837758/navigationduplicated-navigating-to-current-location-search-is-not-allowed – acbetter Jul 22 '20 at 01:11

1 Answers1

1

v-avatar isn't a link abd doesn't support to so you have to wrap your image with a router link like:

<div id="app">
  <v-app>
    <v-app-bar>
      <v-toolbar-items>
        <router-link to="/profile">
          <v-avatar>
            <v-img src="http://www.dumpaday.com/wp-content/uploads/2019/10/00-156-750x280.jpg"></v-img>
          </v-avatar>
        </router-link>
      </v-toolbar-items>
    </v-app-bar>
  </v-app>
</div>

Or you add a custom click event on the v-avatar and do the routing in a method like

<v-avatar @click="forward">

JS

methods: {
  forward() {
     this.$router.push("/profile")
  }
}
pmalbu
  • 935
  • 9
  • 13
dreijntjens
  • 4,577
  • 26
  • 28
  • When you put a colon before the property name (`:to` in your case), the value (`/profile` in your case) will be interpreted as JavaScript code, therefore your example will fail. Please edit the answer and remove the colon. Thanks. – Vicente Olivert Riera Mar 29 '20 at 10:31