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

Question

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

类似于我想给 v-flex 一个条件属性。（两件 xs6，三件 xs4，依此类推）

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

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

我想计算哪些将被添加到我的 v-flex，但我不知道如何完成。因为我不能 v-bind 任何东西...有人可以帮助我吗？

Answer 1

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

<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/

Answer 2

好的，我现在明白你的问题了。我仔细研究了一下，解决起来并不容易，因为 v-flex 不支持参数，它应该被声明为一个属性而不是 class（正如这个响应所说）。

因为没有办法创建一个没有值的属性，就像我在评论中说的，经过一些测试，我会做如下：

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

这应该使用 class 呈现 v-flex 元素，例如："xs12","xs6","xs4"..

然后你应该只 copy 这个元素的 class 样式，它有 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（例如）。

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

vuetify: calculate grid width by passed props

conditional

attributes

vue.js

vuetify.js