Change card component image

Question

I’m using the Vue card component, with a Static image, inside a v-navigation-Drawer.

 <v-card-media height="80" src="/static/img/logo.png"></v-card-media>

How do I change the image according to the state of the navigation?

I want something similar to the #mini example of the link below, but when the state is "collected" I want to use another image.

https://vuetifyjs.com/en/components/navigation-drawers

Answer 1

If you just want to change the image according to the state of the mini, there are several ways to accomplish this. Just check which boolean variable is performing the control of this state, and change the src image. Starting a project Vuetify, the name of this variable is miniVariant. Below is a basic example of a way to do this:

App.

    <template>
      <v-app>
        <v-navigation-drawer
          persistent
          :mini-variant="miniVariant"
          :clipped="clipped"
          v-model="drawer"
          enable-resize-watcher
          fixed
          app
        >
          <v-list>
            <v-list-tile
              value="true"
              v-for="(item, i) in items"
              :key="i"
            >
              <v-list-tile-action>
                <v-icon v-html="item.icon"></v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title v-text="item.title"></v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list>
        </v-navigation-drawer>
        <v-toolbar
          app
          :clipped-left="clipped"
        >
          <v-btn icon @click.stop="miniVariant = !miniVariant">
            <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
          </v-btn>
          <v-toolbar-title v-text="title"></v-toolbar-title>
        </v-toolbar>
        <v-content>
          <router-view :image="image"/>
        </v-content>
        <v-navigation-drawer
          temporary
          :right="right"
          v-model="rightDrawer"
          fixed
          app
        >
          <v-list>
            <v-list-tile @click="right = !right">
              <v-list-tile-action>
                <v-icon>compare_arrows</v-icon>
              </v-list-tile-action>
              <v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-navigation-drawer>
        <v-footer :fixed="fixed" app>
          <span>&copy; 2017</span>
        </v-footer>
      </v-app>
    </template>

    <script>
    export default {
      name: 'App',
      data () {
        return {
          clipped: false,
          drawer: true,
          fixed: false,
          images: [
            'logo1.png',
            'logo2.png'
          ],
          items: [
            {
              icon: 'bubble_chart',
              title: 'Menu1'
            },
            {
              icon: 'dashboard',
              title: 'Menu2'
            },
            {
              icon: 'settings',
              title: 'Menu3'
            }
          ],
          miniVariant: false,
          right: true,
          rightDrawer: false,
          title: 'Stackoverflow'
        }
      },
      computed: {
        image () {
          return this.miniVariant ? this.images[0] : this.images[1]
        }
      }
    }
    </script>

Helloworld.Ve

    <template>
      <v-container fluid>
        <v-slide-y-transition mode="out-in">
          <v-layout column align-center>
            <v-card-media height="80" :src="image"></v-card-media>
          </v-layout>
        </v-slide-y-transition>
      </v-container>
    </template>

    <script>
    export default {
      props: {
        image: String
      },
    }
    </script>