Изменение высоты изображения V-карты Vuetify?

Question

Я пытаюсь динамически изменить высоту изображения v-карты с помощью v-select. Мой случай таков, что когда я выбираю 1/3, высота изображения карты должна быть 200px, для половины она должна быть около 250px, а для полного около 300px. Как я могу этого достичь?

Я создал кодовую ручку для демонстрации: https://codepen.io/anon/pen/JQOqNP?editors=1010.

 <div id="app">
 <v-app id="inspire">
<v-card>
  <v-card-title>
  <v-layout>
    <v-spacer></v-spacer>
    <v-flex xs3>
      <v-select :items="items" label="Select Card Height" v- 
   model="flexSize"></v-select>
    </v-flex>
    </v-layout>
   </v-card-title>
   <v-divider></v-divider>
   <v-divider></v-divider>
    <v-card-text>
      <v-layout>
        <v-flex xs12 d-flex>
            <v-layout class="my-3 pt-1 justify-center">
              <v-flex xs4>
                  <v-card class = 'mx-2'>
                    <v-img src="https://via.placeholder.com/600x400? 
                   text=+">
                      <v-container>
                        <v-layout class="justify-center">
                          <v-flex class="text-xs-center">
                            <div class="dark--text text--lighten-3 title 
                  mt-5 py-3">Choose an image</div>
                          </v-flex>
                        </v-layout>
                      </v-container>
                    </v-img>
                    <v-card-text>
                      <div>lorem ipsum lorem ipsum  lorem ipsum  lorem 
                ipsum  lorem ipsum </div>
                    </v-card-text>
                  </v-card>
              </v-flex>
            </v-layout>
            <v-layout>
            </v-layout>
        </v-flex>
      </v-layout>
    </v-card-text>
   </v-card>
 </v-app>

     new Vue({
    el: '#app',
   data() {
   return {
     items: [
      '1/3',
      'Half',
      'Full'
    ],
    flexSize: '1/3',
     }
   },
})

Спасибо всем заранее.

Answer 1

Это должно решить вашу проблему:

на макете вашей карты, где вы хотите изменить высоту, добавьте:

<v-card :style="{height : flexSize == '1/3'?200+'px':flexSize =='half' ? 250 +'px':300+'px'}" </v-card>