Vuetify 网格系统不允许嵌套网格中的不同顺序答案

【问题标题】：Vuetify grid system does not allow different order in nested gridVuetify 网格系统不允许嵌套网格中的不同顺序
【发布时间】：2019-03-05 08:22:10
【问题描述】：

我在https://vuetifyjs.com/en/framework/grid#nested-grid 中看到了嵌套网格示例。但是我需要一些不同的布局，并且顺序应该在不同的断点中改变。

所需的布局：

md 及以上：https://codepen.io/jcpribeiro/pen/NJReGm
sm 下：https://codepen.io/jcpribeiro/pen/gEPEOj

注意顺序不同。

在另一个示例中，我可以使用 order-xs1（参见 https://vuetifyjs.com/en/framework/grid#order）在不同的布局中使用不同的顺序，但是嵌套网格中的 v-flex 项目不属于同一个 v-layout 项目，所以它不会以同样的方式工作。

我想避免使用 javascript 移动项目。

有人知道吗？

【问题讨论】：

如果有人正在为 RWD 寻找不同的 order，那么 <v-col> 上的 order-sm="1"/order-sm="2"/... 有效。我认为这不是这个问题的答案，但我实际上是在不同的屏幕尺寸上寻找 order 并且弹出了这个问题。 PS。我确实排除了依赖<v-layout>/<v-flex> 和order-xs1/order-xs2 on <v-flex> 的旧方法。找不到依赖<v-row>/<v-col>的新方法来处理这个问题，这是我的问题。

标签： vuetify.js

【解决方案1】：

由于顺序不同，我会在一个布局上应用 v-if="$vuetify.breakpoint.mdAndUp" 并在另一个布局上应用 v-if="$vuetify.breakpoint.smAndDown"。

https://vuetifyjs.com/en/framework/breakpoints#breakpoints

举个例子：

<v-layout v-if="$vuetify.breakpoint.mdAndUp" row wrap>
  1st set of flex items in here        
</v-layout>
<v-layout v-if="$vuetify.breakpoint.smAndDown" row wrap>
  2nd set flex items in here        
</v-layout>

【讨论】：

您好，感谢您的回复。您的意思是复制其中一个元素吗？
可以从数据中插入文本以保持代码干燥。如果布局很大...考虑创建两个组件。
本希望能得到更好的解决方案，但如果没有更好的解决方案，我会接受这个。
您可以在元素上设置类并将它们绑定到 switch 语句。例如：class='computedProperty' 然后使用根据视口大小更改顺序的开关。这可以参与，但将是另一种选择...查看Switch Example