Vuetfiy v-text-label没有边框

时间:2018-03-24 18:24:49

标签: vuetify.js

所以我试图以多种不同的方式解决这个问题,我知道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

1 个答案:

答案 0 :(得分:0)

您的应用程序的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/]