vuetify change flex size in runtime

Question

I create a v-component jus like this:

<v-container grid-list-md >
  <v-layout row wrap>
      <v-flex xs10>

So now can I change in runtime the xs10 to xs5 for sample (I have 2 panels with one textfield in each, so when my user focus the text from first panel I need to increase his size xs6 to xs8 and decrease the other panel from xs6 to xs4 for sample

Answer 1

you can control the flexsize like this

<v-flex :xs10="true" :xs5="false">

So you can create a new data called firstPanelFocus for example,

 data() {
    return {
      firstPanelFocus: false
    };
  },

and for the v-flex

<v-flex :xs10="!firstPanelFocus" :xs5="firstPanelFocus">

Change the value of firstPanelFocus whenever user focus on(or blur from) a certain area