时间戳

首页 > 解决方案 > 集中无线电组 Vuetify

javascript - 集中无线电组 Vuetify

问题描述

我无法集中v-radio-group。这是我得到的：

<v-container grid-list-md text-xs-center>
  <v-form ref="form>

    <div v-if="question.question_type == 'YESNO' ">
          <v-radio-group v-model="answer">
            <v-layout>

              <v-flex>
                <v-radio
                value="Yes"
                label="Yes"
                ></v-radio>
              </v-flex>

              <v-flex>
                <v-radio
                value="No"
                label="No"
                ></v-radio>
              </v-flex>

            </v-layout>
          </v-radio-group>
        </div>   

  </v-form>
</v-container>

我尝试设置类'text-xs-center'和'justify-center'来形成和div标签，但它没有帮助。我希望这个布局（单选按钮）位于我的表单中间。

标签： javascriptcssvue.jsvuejs2vuetify.js

解决方案

实际上，Vuetify 的做法似乎是这样的：

<v-form>
  <v-radio-group row v-model="answer" class="justify-center">
    <v-radio value="Yes" label="Yes"></v-radio>
    <v-radio value="No" label="No"></v-radio>
  </v-radio-group>
</v-form>

所以v-radio-group添加row道具，然后将按钮与justify-center.

new Vue({
  el: '#app',
  data: () => ({
    answer: null
  })
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-xl>
        <v-container grid-list-md text-xs-center>
          <v-form>
            <v-radio-group row v-model="answer" class="justify-center">
              <v-radio value="Yes" label="Yes"></v-radio>
              <v-radio value="No" label="No"></v-radio>
            </v-radio-group>
          </v-form>
        </v-container>
      </v-container>
    </v-content>
  </v-app>
</div>

推荐阅读