Vue.js vuetify在运行时更改flex大小

我创建了一个v形组件JU，如下所示：

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

---

现在我可以在运行时将样本的xs10更改为xs5了（我有两个面板，每个面板中有一个文本字段，因此当我的用户聚焦第一个面板的文本时，我需要将其大小从xs6增加到xs8，将样本的另一个面板从xs6减少到xs4，您可以像这样控制flexsize

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

对于v-flex

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

每当用户聚焦（或模糊）某个区域时，更改

firstPanelFocus

的值

从您可以使用动态指令参数开始

例如：

一些文本

在vue实例中：

export default {
  data: () => ({
    dynamicFlex: 'xs12'
  })
}

---

可以找到完整的工作示例代码

您也可以直接在v-flex上使用类并绑定对象。

：class=“{'xs10'：hasfocus，'xs5'：！hasfocus}”

我喜欢这个解决方案，但我不知道如何让它工作，如果我使用一个对象，像这样：

。有什么想法吗？嗯，这应该与对象有关。是

design.dynamicFlex.xs

'xs12'的值吗？是的，但看起来它在点上失败了，因为当我检查元素时，我看到它打印了

[design

为了使其工作，您可以创建一个返回

design.dynamicFlex.xs

export default {
  data: () => ({
    dynamicFlex: 'xs12'
  })
}