Vuetify v-text-label 没有边框

Question

所以我尝试以多种不同的方式解决这个问题，我知道 Vuetify 已更新，因为我在使用它之前已经在 NPM 中重新安装了它。

我有一些当前问题的屏幕截图，但奇怪的是它在我正在使用的另一个项目中工作并且它运行相同的库。

https://i.imgur.com/UXK9DiB.png https://i.imgur.com/ZoRl7e8.png

未着色组件的代码

<html>
<head>
    <title>XRPLife Interfaces</title>
    <link rel="stylesheet" href="libraries/vuetify/dist/vuetify.min.css">
</head>
<body>

    <v-app>

        <div id="test">
            <v-text-field label="Testing" v-model="test"></v-text-field>
        </div>

    </v-app>

    <script src="libraries/vue/dist/vue.min.js"></script>
    <script src="libraries/vuetify/dist/vuetify.min.js"></script>
    <script>

        var app = new Vue({
            el: "#test",

            data: {
                test: "",
            },

            methods: {

            }
        })

    </script>
</body>

它如何与 SAME 库一起工作，但只是一个不同的项目 https://i.imgur.com/86TNKfO.png

Answer 1

您的应用程序 HTML 标签嵌套不正确。试试这个：

<div id="test">
  <v-app>
    <v-content>
      <v-container>
        <v-text-field label="Testing" v-model="test"></v-text-field>
      </v-container>
    </v-content>
  </v-app>
</div>

[https://jsfiddle.net/ga8kpzp0/]

Vuetify v-text-label 没有边框

Vuetfiy v-text-label has no border

vuetify.js