Динамически переключать размер флекс в Vuejs?

Question

Я пытаюсь переключить размер flex, используя Vuejs. У меня есть три переключателя и выбор. Как сделать так, чтобы при выборе радиокнопки «Выбор» в XS4 выборка имела размер изгиба XS4. То же самое для XS6 и XS12 соответственно.

Я создал Codepen https://codepen.io/anon/pen/agzoNE.

    <div id="app">
    <v-app id="inspire">
    <v-radio-group row v-model="radioGroup">
    <v-radio label="XS4" value="XS4"></v-radio>
    <v-radio label="XS6" value="XS6"></v-radio>
    <v-radio label="XS12" value="XS12"></v-radio>
     </v-radio-group>
  <v-select placeholder="How to Dynamically change the flex size for this 
select?"></v-select>
</v-app>
</div>


  new Vue({
  el:'#app',
   data(){
   return{
    radioGroup: 1,
  }
 }
 })

Заранее спасибо.

Answer 1

Поэтому измените значение радиостанции на строчные, оберните v-select с помощью v-layout и v-flex, а затем привяжите класс v-flex к radioGroup.

<v-layout row>
    <v-flex :class="radioGroup">
        <v-select placeholder="How to Dynamically change the flex size for this select?" ></v-select>
    </v-flex>
</v-layout>

Codepen