vue.js - vuetify：通过传递的道具计算网格宽度

Question

我想制作一个菜单组件，它根据作为道具传入的 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 任何东西......有人可以帮助我吗？

标签： vue.jsattributesconditionalvuetify.js

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