Question

我正在尝试创建一个表单，其中按钮和切换键在同一行。我有这段代码。

<template>
    <v-container>
        <v-row>
            <codemirror v-model="code" ref="myCm" :options="cmOptions"></codemirror>
        </v-row>
        <v-row>
            <v-btn v-if="isQueryNotInProgress" v-on:click="onSubmit">Submit</v-btn>
            <v-progress-circular v-if="!isQueryNotInProgress" indeterminate/>
            <v-btn v-if="!isQueryNotInProgress" v-on:click="cancelQuery">Cancel</v-btn>
            <v-switch v-model="cacheSwitch" :label="`Ignore Cache`"></v-switch>
        </v-row>
    </v-container>
</template>

但是这些元素是垂直排列的，而不是并排排列。我想要提交按钮，而并排忽略缓存按钮。

我还尝试将它们设置为多列，如下所示。但是它们仍然是一个。我也尝试过为两列设置cols="6"，但没有任何运气。有人可以帮助我并排显示这些内容吗？

<template>
    <v-container>
        <v-row>
            <codemirror v-model="code" ref="myCm" :options="cmOptions"></codemirror>
        </v-row>
        <v-row>
            <v-col>
                <v-btn v-if="isQueryNotInProgress" v-on:click="onSubmit">Submit</v-btn>
                <v-progress-circular v-if="!isQueryNotInProgress" indeterminate/>
                <v-btn v-if="!isQueryNotInProgress" v-on:click="cancelQuery">Cancel</v-btn>
            </v-col>
            <v-col>
                <v-switch v-model="cacheSwitch" :label="`Ignore Cache`"></v-switch>
            </v-col>
        </v-row>
    </v-container>
</template>

Answer 1

我可以使用<v-layout row wrap>和<v-flex>将它们放在一行上。这是代码。

<template>
    <v-container fluid>
        <v-layout row wrap>
            <v-flex xs12 sm12>
                <codemirror v-model="code" ref="myCm" :options="cmOptions"></codemirror>
            </v-flex>
        </v-layout>
        <v-layout row wrap>
            <v-flex xs12 sm2>
                <v-btn v-if="isQueryNotInProgress" v-on:click="onSubmit">Submit</v-btn>
                <v-progress-circular v-if="!isQueryNotInProgress" indeterminate/>
                <v-btn v-if="!isQueryNotInProgress" v-on:click="cancelQuery">Cancel</v-btn>
            </v-flex>
            <v-flex xs12 sm6>
                <v-switch v-model="ignoreCache" :label="`Ignore Cache`"></v-switch>
            </v-flex>
            <v-flex xs12 sm4>
                <v-btn v-on:click="onQuery1Click">Query 1</v-btn>
                <v-btn v-on:click="onQuery2Click">Query 2</v-btn>
                <v-btn v-on:click="onQuery3Click">Query 3</v-btn>
            </v-flex>
        </v-layout>
    </v-container>
</template>

这是最终结果。

Answer 2

<v-row>
 <v-col cols="auto">
  <v-btn>Button 1</v-btn>
  <v-btn>Button 2</v-btn>
  <v-btn>Button 3</v-btn>
 </v-col>
</v-row>

只要你有足够的空间就可以了。

v行和v-col不会在vuetify

2 个答案: