vuetify：通过传递的道具计算网格宽度答案

【问题标题】：vuetify: calculate grid width by passed propsvuetify：通过传递的道具计算网格宽度
【发布时间】：2018-10-13 18:53:10
【问题描述】：

我想制作一个菜单组件，它根据作为道具传入的 menuItems 的数量构建相同大小的按钮。

类似于 https://stackoverflow.com/a/47215040/6066886 我想给 v-flex 一个条件属性。（xs6 表示两个项目，xs4 表示三个项目，依此类推）

（类似于<v-flex v-for="item in menuItems" xs[12 / menuItems.length]>）

在链接的问题中，想法是根据条件传递或不传递“xs10”。

我想计算其中哪些将添加到我的 v-flex 中，但我不知道该怎么做..因为我无法 v-bind 任何东西...谁能帮助我？

【问题讨论】：

我不明白你的问题，不适合你xs{{12/menuItems.length}}解决方案（你必须改变顺序）？如果您有 1 个项目，则具有展开的元素、2 个元素 50% 等。
你从哪里得到这个解决方案？我从来没有见过这个表达......看起来我正在寻找什么......但intellij说“标签开始没有关闭”，这似乎不起作用（虽然顺序错误，你是对的）“12 / menuItems .length" 不起作用。斜线被解释为一种 html 标记.. 破坏一切

标签： vue.js attributes conditional vuetify.js

【解决方案1】：

您可以将计算属性绑定为类对象：

<v-flex :class="xsComputed" v-for="(item,i) in items" :key="i">{{item}}</v-flex>


...

new Vue({
  el: '#app',
  data: function() {
    return {
      items: [1, 2, 3, 4]
    }
  },
  computed: {
    xsComputed: function() {
      var step = Math.floor(10 / this.items.length)
      var xsc = {}
      xsc['xs' + step] = true
      console.log(xsc)
      return xsc
    }
  }
})

https://jsfiddle.net/26zfLn8j/

【讨论】：

【解决方案2】：

好的，我现在看到你的问题了。我正在挖掘一点，这并不容易解决，因为 v-flex 不支持参数，它应该被声明为属性而不是类（正如这个回复 https://stackoverflow.com/a/47215040/6058255 所说）。

由于无法创建没有值的属性，就像我在评论中所说的那样，并且经过一些测试，我将执行以下操作：

<v-flex v-bind:class="'xs'+12/menuItems.length" v-for="menuItem in menuItems">
            {{menuItem}}
</v-flex>

这应该用类似的类渲染v-flex 元素："xs12","xs6","xs4"..

那么你应该只copy这个元素的类样式，它有v-flex，比如：

.xs12{ max-width:100%; }
.xs6{ max-width: 50%; }
.xs4{ max-width: 25%; }
.xs3{ max-width: 33.333333333%;  }
...

也许不是more elegant 解决方案，但它很简单，我认为它对你有用。

希望对你有帮助！

编辑：

查看stdob-- 答案我现在看到的只有表达式：

<v-flex v-bind:class="'xs'+12/menuItems.length" v-for="menuItem in menuItems">
            {{menuItem}}
</v-flex>

应该可以。 flex 组件将呈现为flex xs12（例如）。

【讨论】：