Question

谁会知道如何修复vuetify概述文本字段的标签位置。这是一个简单的例子。在聚焦时，标签无法正确定位自己。

<div id="js-nomination-form">
<v-form v-model="valid">    
        <v-row>
                <v-col cols="6">
                        <v-text-field
                            outlined
                            v-model="companyname"
                            label="Company name"
                          ></v-text-field>
                    </v-col>
          <v-col cols="6">
              <v-text-field
                v-model="companyaddress"
                label="Address"
                outlined
                    ></v-text-field>
                </v-col>
        </v-row>
</v-form>
</div> 
new Vue({
  el: '#js-nomination-form',
  vuetify: new Vuetify(),
  data: () => ({
    valid: false,
    companyname: '',
    companyaddress: '',
  }),
  methods: {
    submit () {

    },
    clear () {

    }
  }
})

https://codepen.io/mkrisch76/pen/YzPbrpy

Answer 1

将v-form与v-app像这样包装：

<div id="js-nomination-form">
  <v-app>
    <v-form v-model="valid">    
      <v-row>
        <v-col cols="6">
          <v-text-field
            outlined
            v-model="companyname"
            label="Company name"
          ></v-text-field>
        </v-col>
        <v-col cols="6">
          <v-text-field
            v-model="companyaddress"
            label="Address"
            outlined
          ></v-text-field>
        </v-col>
      </v-row>
    </v-form>
  </v-app>
</div>

但这是一个简单的解决方案，只需查看CodePen示例中的更改即可。最好像这样在您的主模板（通常是App.vue）中使用v-app：

<!-- App.vue -->

<template>
    <v-app id="app">
        <router-view/>
    </v-app>
</template>
...

v-app仅应在您的应用程序中一次使用。进一步了解v-app

Vue SPA Vuetify v文本字段轮廓字段标签未完全定位

1 个答案: