I am creating a form inside a Vue component using Vue.js & Vuetify but the list of schools I want to display in the autocomplete box are missing. I have included them as an array in the data function in the component but they are not showing up and the following error is thrown in the console.
[Vuetify] Unable to locate target [data-app]
<template>
<div class="app">
<v-card width="500">
<v-card-title class="pb-0">
<h1>Sign Up</h1>
</v-card-title>
<v-card-text>
<v-form>
<v-text-field
required
label="Email"
type="email"
prepend-icon="mdi-email"
/>
<v-text-field
required
:type="showPassword ? 'text' : 'password'"
label="Password"
prepend-icon="mdi-lock"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
#click:append="showPassword = !showPassword"
/>
<v-text-field
required
label="First Name"
prepend-icon="mdi-account-circle"
/>
<v-text-field
required
label="Last Name"
prepend-icon="mdi-account-circle"
/>
<v-text-field
required
label="Preferred Username"
prepend-icon="mdi-account-circle"
placeholder="This name will be seen by others and identify you on the site"
/>
<v-autocomplete
label="Which school do you attend?"
:items="schools"
></v-autocomplete>
</v-form>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn color="info">Sign Up</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
<script>
export default {
name: "signup",
data: function() {
return {
showPassword: false,
schools: [
"Ipswich High School",
"Northgate High School",
"Kesgrave",
"Ipswich Academy"
]
};
}
};
</script>
For Vuetify to work, you need to wrap all of your content into a <v-app> component. The error tells you that you're missing this component.
<template>
<div class="app">
<v-app>
<v-card width="500">
<v-card-title class="pb-0">
<h1>Sign Up</h1>
</v-card-title>
<v-card-text>
<v-form>
<v-text-field
required
label="Email"
type="email"
prepend-icon="mdi-email"
/>
<v-text-field
required
:type="showPassword ? 'text' : 'password'"
label="Password"
prepend-icon="mdi-lock"
:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
#click:append="showPassword = !showPassword"
/>
<v-text-field
required
label="First Name"
prepend-icon="mdi-account-circle"
/>
<v-text-field
required
label="Last Name"
prepend-icon="mdi-account-circle"
/>
<v-text-field
required
label="Preferred Username"
prepend-icon="mdi-account-circle"
placeholder="This name will be seen by others and identify you on the site"
/>
<v-autocomplete
label="Which school do you attend?"
:items="schools"
></v-autocomplete>
</v-form>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn color="info">Sign Up</v-btn>
</v-card-actions>
</v-card>
</v-app>
</div>
</template>
The functionality of the component will not work properly unless the form is contained within a <v-app></v-app> wrapper
Related
<template> <!--HomeView-->
<v-layout>
<v-col class="ma-0 pa-0">
<v-img
class="bg-white"
:aspect-ratio="1"
src="https://images7.alphacoders.com/952/952959.jpg"
cover
></v-img>
</v-col>
<v-col class="ma-0 pa-0 bg-something d-flex align-center justify-center">
<v-card>
<InputComp />
</v-card>
</v-col>
</v-layout>
</template>
Inputcomp
<template>
<v-sheet class="bg-something pa-12" rounded>
<v-card class="mx-auto px-6 py-8 bg-somethingElse">
<v-form v-model="form" #submit.prevent="onSubmit">
<v-text-field
v-model="email"
:readonly="loading"
:rules="[required]"
class="mb-2"
clearable
label="Email"
></v-text-field>
<v-text-field
v-model="password"
:readonly="loading"
:rules="[required]"
clearable
label="Password"
placeholder="Enter your password"
></v-text-field>
<br />
<v-btn
:disabled="!form"
:loading="loading"
block
color="something"
size="large"
type="submit"
variant="elevated"
>
Sign In
</v-btn>
</v-form>
</v-card>
</v-sheet>
</template>
div photo
I add d-flex and my Card element is restricted. I want to both align and center. I tried it with you, can you help me?
Error clears when removing d flex and align-items. When removing align-items, the bottom of the card becomes white. Separated from the Card Grid
I have a small problem, don't understand how to connect the frontend and backend so email and password are verified from the database. I have programmed this in Vue.js for Login and Register page. And now I need to connect it with API so data is verified from the database and it is hard quite hard for me to understand it because I am learning Vue now.
<template>
<v-app id="inspire">
<v-content>
<v-container class="fill-height" fluid>
<v-row align="center" justify="center">
<v-col cols="12" sm="8" md="8">
<v-card class="elevation-12">
<v-window v-model="step">
<v-window-item :value="1">
<v-row>
<v-col cols="12" md="8">
<v-card-text class="mt-12">
<div>
<section>
<iframe width="600" height="315" src="https://www.youtube.com/embed/ebuUqH4ZVUQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
</div>
<h1
class="text-center display-2 teal--text text--accent-3"
>Sign in to Tetris</h1>
<h4 class="text-center mt-4">Ensure your email for registration</h4>
<v-form>
<v-text-field
label="Email"
name="Email"
prepend-icon="email"
type="text"
color="teal accent-3"
/>
<v-text-field
id="password"
label="Password"
name="password"
prepend-icon="lock"
type="password"
color="teal accent-3"
/>
</v-form>
</v-card-text>
<div class="text-center mt-3">
<v-btn rounded color="teal accent-3" dark>SIGN IN</v-btn>
</div>
</v-col>
<v-col cols="12" md="4" class="teal accent-3">
<v-card-text class="white--text mt-12">
<h1 class="text-center display-1">Hello, Friend!</h1>
<h5
class="text-center"
>Enter your personal details and start journay with us</h5>
</v-card-text>
<div class="text-center">
<v-btn rounded outlined dark #click="step++">SIGN UP</v-btn>
</div>
</v-col>
</v-row>
</v-window-item>
<v-window-item :value="2">
<v-row class="fill-height">
<v-col cols="12" md="4" class="teal accent-3">
<v-card-text class="white--text mt-12">
<h1 class="text-center display-1">Welcome Back!</h1>
<h5
class="text-center"
>To Keep connected with us please login with your personnel info</h5>
</v-card-text>
<div class="text-center">
<v-btn rounded outlined dark #click="step--">Sign in</v-btn>
</div>
</v-col>
<v-col cols="12" md="8">
<v-card-text class="mt-12">
<h1 class="text-center display-2 teal--text text--accent-3">Create Account</h1>
<h4 class="text-center mt-4">Ensure your email for registration</h4>
<v-form>
<v-text-field
label="Name"
name="Name"
prepend-icon="person"
type="text"
color="teal accent-3"
/>
<v-text-field
label="Email"
name="Email"
prepend-icon="email"
type="text"
color="teal accent-3"
/>
<v-text-field
id="password"
label="Password"
name="password"
prepend-icon="lock"
type="password"
color="teal accent-3"
/>
</v-form>
</v-card-text>
<div class="text-center mt-n5">
<v-btn rounded color="teal accent-3" dark>SIGN UP</v-btn>
</div>
</v-col>
</v-row>
</v-window-item>
</v-window>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
<script>
export default {
data: () => ({
step: 1
}),
props: {
source: String
}
};
</script>
I think you need to know what is client, server and how they work via the HTTP protocol in the case you mentioned.
Then, search the documentation, you could find the usage code.
I'm trying to make a create a form with i18n translation.
I already tried that but it's not working :
<div id="form" align="center"
justify="center">
<v-col sm="4" align="center"
justify="center">
<v-form
ref="form"
v-model="valid"
lazy-validation
>
<v-text-field
v-model="login"
label="{{ $t('Username') }}"
required
></v-text-field>
<v-text-field
v-model="password"
label="{{ $t('Password') }}"
type="password"
required
></v-text-field>
<v-btn
color=blue
class="mr-4"
#click="validate"
>
{{ $t('Login') }}
</v-btn>
</v-form>
</v-col>
</div>
Do someone have any idea to translate the labels on my form ?
Thank you
Try something like :label="$t('your.translation.key')"
Vuetify official example
I have, say copied the layout from the vuetify docs but I am not getting the same layout. I cannot figure out what is blocking me. Is there some default properties that I have to deal with?
Login.vue:
<template>
<v-app id="inspire">
<v-content>
<v-container
class="fill-height"
fluid
>
<v-row
align="center"
justify="center"
>
<v-col
cols="12"
sm="8"
md="4"
>
<v-card class="elevation-12">
<v-toolbar
color="primary"
dark
flat
>
<v-toolbar-title>Login</v-toolbar-title>
<v-spacer />
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field
label="Login"
name="login"
prepend-icon="person"
type="text"
v-model="username"
/>
<v-text-field
id="password"
label="Password"
name="password"
prepend-icon="lock"
type="password"
v-model="password"
/>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn #click="login" color="primary" >Login</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
app.vue:
<template>
<v-app id="app">
<v-content>
<v-container fluid>
<router-view />
</v-container>
</v-content>
</v-app>
</template>
<script>
I do not have any custom designed css. I am using vue-cli.
Here is what my layout looks like:
With no error in console.
I am using avoriaz for testing in vuejs . Here is my code for testing and components.
<template>
<v-container fluid class="login-container">
<div class="hyperlogo">
<center>
<img src='../../../assets/logo.png' height="100" width="100">
<p>HyperEmail</p>
<a>v0.11.1</a>
</center>
</div>
<v-layout row wrap>
<v-flex xs6 md4 offset-md4>
<v-card class="login-card">
<v-card-text class="login-text">
<v-text-field
v-on:focus="focusUser"
label="Username"
placeholder="Username"
class="mt-5"
v-model="username"
#keyup.enter.native="validateData"
v-bind:rules="[userNameError]"
></v-text-field>
<v-text-field
v-on:focus="focusPassword"
label="Password"
placeholder="Password"
v-model="password"
type="password"
v-on:keyup.enter.native="validateData"
v-bind:rules="[passwordError]"
></v-text-field>
</v-card-text>
<div #click="validateData" class="button-style">
<v-btn block primary light >Login</v-btn>
</div>
</v-card>
</v-flex>
<Error v-if="error" :text="error.msg" :onDestroy="resetError" />
</v-layout>
</v-container>
</template>
For testing
import Login from '#/containers/views/login/Login.vue'
describe('Login.vue', () => {
it('checks text inside login component', () => {
const wrapper = mount(Login)
// let parent = wrapper.find('.hyperlogo')[0]
// expect(wrapper.contains('.hyperlogo')).to.equal(true)
if (wrapper.find('.hyperlogo')[0]) {
console.log('Yes it is there')
}
expect(wrapper.text()).to.equal('')
expect(wrapper.find('center')[0].is('center')).to.equal(true)
})
})
Here wrapper.find is not working
Error : - TypeError: Cannot read property 'is' of undefined .. Can anyone helps me to solve this type of error ??