Question

我试图基于数组值创建行和列。当前，这就是我的组件中的内容：

<template>
<v-col cols="columnnum">{{value}}</v-col>
</template>

现在value和columnnum都是属性，其详细信息来自父级。我正在检查是否在创建期间通过添加console.log来确定这些值，以确保获取数据。我似乎无法弄清楚我在做什么错。如果已经回答了我的歉意。

Answer 1

您可以有基于道具的动态列，只需添加v-bind：cols或简单地：cols

<template>
<v-col :cols="columnnum">{{value}}</v-col>
</template>

为快速解释，仅创建了一个代码笔： https://codepen.io/chansv/pen/dyygVWR?&editable=true&editors=101

<div id="app">
  <v-app id="inspire">
    <v-container class="grey lighten-5">
      <v-btn color="primary" @click="dynamicCol == 3 ? dynamicCol = 6 : dynamicCol = 3">cols {{dynamicCol}}</v-btn>
      <v-row>
        <v-col
          :cols="dynamicCol"
          style="border: solid 1px black;"
        >
          sample text
        </v-col>
        <v-col
          style="border: solid 1px black;"
          :cols="dynamicCol"
        >
          sample text
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    dynamicCol: 6,
  }
})

在v-col vuetify中动态更改cols

1 个答案: