在 v-col vuetify 中动态更改 cols答案

【问题标题】：Dynamically change cols in v-col vuetify在 v-col vuetify 中动态更改 cols
【发布时间】：2019-11-13 22:51:38
【问题描述】：

我正在尝试基于数组值创建行和列。目前，这是我的组件中的内容：

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

现在 value 和 columnnum 都是道具，细节来自父级。我正在检查是否通过在创建过程中添加 console.log 来检查这些值，以确保我正在获取数据。我似乎无法弄清楚我做错了什么。如果这已经得到回答，我很抱歉。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

您可以拥有基于 props 的动态列，只需通过添加 v-bind:cols 或简单地更新代码 :cols

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

为了快速解释，刚刚创建了一个 codepen： 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,
  }
})

【讨论】：

完美！非常感谢你的帮助！那行得通。似乎是一个简单的问题，它可能是，但它非常令人沮丧哈哈。非常感谢

【解决方案2】：

你可以做一个简单的工作。例如，如果您发送到列的变量是一个数字，您可以将其动态化，如下所示：

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

【讨论】：