I just tried to make a single login form in Vue but it returns
[Vue warn]: Failed to resolve component: v-text-field
and
[Vue warn]: Failed to resolve component: v-form
the code in login component:
<template lang="html">
<div>
<v-form>
<v-text-field v-model="loginInfo.username" label="Username"/>
<v-text-field v-model="loginInfo.password" label="Password"/>
<v-btn>Login</v-btn>
</v-form>
</div>
</template>
<script>
export default {
data() {
return{
loginInfo: {
username:'',
password:'',
}
}
},
}
</script>
I got the same issue and put around 2 hours to figure out. The only problem with me was my browser was getting the cached js file that did not have my required component.
I see two options to answer the question:
Either you use Vuetify.js as you are trying to in the code provided above. I would recommend checking if you are using Vuetify.js correctly by following the quick start guide.
The other option would be not to use Vuetify.js and therefor use the regular HTML expressions in the form:
<div>
<form>
<label for="username">Username</label>
<input id="username" type="text" v-model="loginInfo.username"/>
<label for="password">Password</Label>
<input id="password" type="password" v-model="loginInfo.password"/>
<input type="submit"value="Login" />
</form>
</div>
Related
Versions
nuxt: ^2.14.12
node: v14.15.4
Reproduction
Hello everyone and thank you in advance.
I have a strange issue that I don't really understand what's the problem and how to deal with it.
I have installed a fresh nuxt ssr project.
I'm getting the following warning
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
I have three simple components: Form, Input, Button.
Form.vue
<template>
<form v-bind="$attrs" class="w-full" #submit.prevent="$emit('submitted')">
<div class="space-y-2 mb-4">
<slot name="fields" />
</div>
<slot name="button" />
</div>
</form>
</template>
<script>
export default {
computed: {
hasFields() {
return !!this.$slots.fields
},
},
}
</script>
Input.vue
<template>
<div class="relative w-full">
<input class="form-input block w-full" />
</div>
</template>
<script>
export default {
inheritAttrs: false,
}
</script>
Button.vue
<template>
<button
type="submit"
class="relative btn inline-flex items-center justify-center transition ease-in-out duration-150"
>
Save
</button>
</template>
<script>
export default {}
</script>
I use my components in pages/index.vue like this:
<template>
<div>
<Form>
<template #fields>
<Input />
<Input />
</template>
<template #button>
<Button />
</template>
</Form>
<Form>
<template #fields>
<Input />
<Input />
</template>
<template #button>
<Button />
</template>
</Form>
</div>
</template>
<script>
export default {}
</script>
If i use the Form component only once in the view i don't get the warning.
If i use it twice i get it.
Steps to reproduce
Reproduction link
Install a fresh nuxt ssr project.
Create the components as in the reproduction link
What is Expected?
All the components to render normally without any warnings or errors.
What is actually happening?
I get the following warning.
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
Some extra notes
I know that wrapping the whole thing inside a <client-only> fixes the problem but i want to understand why is this happening in order to avoid it in future cases.
Also if I remove components: true from nuxt.config.js and import the components normally again the warning is gone.
Changing the name of the components eg Button -> TheButton won't fix the problem. You can see the reproduction here.
<script>
import Input from '~/components/Input'
import Button from '~/components/Button'
import Form from '~/components/Form'
export default {
components: { Form, Button, Input}
}
</script>
There seems to be one or more components which are not supported in "Universal" Mode, i.e. they might have code which isn't being executed correctly on server end.
Please try finding that component which you think can cause an issue and wrap that component with .
Here's the link for more information: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component
i am stuck, i am new to vue and vuex and when i run the below code it got me this error. I have searched some of the other questions here but i can't find a solution
[Vue warn]: Computed property "vat" was assigned to but it has no setter.
found in
---> <BusinessList>
<App> at src/App.vue
<Root>
Can someone help me?
-> Below are the files with the code
BusinessList.vue
<script>
// import BusinessDataService from "../services/BusinessDataService";
import { mapGetters, mapActions } from "vuex";
export default {
name: "BusinessList",
methods: {
...mapActions(["fetchBusinesses", "searchBusiness"])
},
computed: mapGetters(["allBusinesses", "vat"]),
created(){
this.fetchBusinesses();
},
mounted() {
this.searchBusiness(this.vat);
}
};
</script>
<template>
<!-- SEARCH FORM -->
<div class="input-group input-group-md">
<input
class="form-control form-control-navbar"
type="search"
placeholder="Search by Vat"
aria-label="Search"
v-model="vat"
/>
<div class="input-group-append">
<button class="btn btn-outline-danger"
type="submit"
#click="searchBusiness"
>
<i class="fas fa-search"></i>
</button>
</div>
</div>
</template>
In vue computed are set to be a getter by default, it means that if you want to set a value to a computed you should define a setter in that computed. here is the vue documentation to read more about this topic:
computed setter vue documentation
now you have set the computed 'vat' from vuex store and used it as a v-model in your template. it means that whenever input data changes, vue tries to assign a value to a computed which has no setter and hence you are getting this error. you should set v-model to a variable in your data and refactor your code to reflect this change.
I have strange problem with render my components.
<app-content-switcher :state="!!selectedProductDetails">
<template slot="up">
<product-d-p :product-id="selectedProductDetails.id">
<template slot-scope="{data: product, loading, error}">
<label v-if="loading">Loading</label>
<div v-else-if="product">
{{product}}
</div>
<label v-else-if="error">Error</label>
</template>
</product-d-p>
</template>
<template slot="down">
Nope
</template>
</app-content-switcher>
AppContentSwitcher is very simple.
<template>
<div>
<slot
name="up"
v-if="state"
/>
<slot
name="down"
v-else
/>
</div>
</template>
<script>
export default {
name: "AppContentSwitcher",
props: {
state: {
type: Boolean,
required: true
}
}
}
</script>
The problem is selectedProductDetails.id where selectedProductDetails is null.
I don't render this component if selectedProductDetails is null, two lines higher I set state in 'AppContentSwitcher', which shouldn't render this component.
What is wrong here? How to fix it?
I find workaround. I created method:
getSelectedProductDetailsId: function (){
return this.selectedProductDetails?.id
}
and it work :)
Still I don't understand why my first solution doesn't work.
I'm using the Vue.js library Vuetify to add a few text field components inside on a component that I create. In order to provide input validation I would like to capture the hasError property of the text field components. I know the path of the property is: this.$children[3]._computedWatchers.hasError.active. But I would like to know if there is another way to access theses properties. Maybe I'm missing something?
<template>
<div class="register">
<form>
<div>
<v-text-field name="new-user-email"
label="Email"
type="email"
single-line
required></v-text-field>
</div>
<div>
<v-text-field name="user-user-password"
label="Password"
type="password"
single-line
required>
</v-text-field>
</div>
<div>
<v-text-field name="new-user-password-confirmation"
label="Confirm Password"
type="password"
single-line
required>
</v-text-field>
</div>
<div #click="registerNewUser">
<v-btn>Register</v-btn>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'register-new-user',
data() {
return {
checked: false
};
},
methods: {
registerNewUser() {
console.log(this.$children[3]._computedWatchers.hasError.active)
console.log('Register a new user')
}
}
};
</script>
Add a ref attribute to the v-text-field component like this:
<v-text-field
ref="password-confirmation"
name="new-user-password-confirmation"
label="Confirm Password"
type="password"
single-line
required
></v-text-field>
Then you can reference the VueComponent instance of the Vuetify text field component (along with its properties and methods) like so:
methods: {
registerNewUser() {
console.log(this.$refs['password-confirmation'].hasError)
}
}
Here's documentation on refs.
I am new to vue and what I'm trying to do is create an date input mask with this jquery plugin: jQuery-Mask-Plugin
I created a vue component like this:
<template>
<input type="text" name="" class="form-control date">
</template>
<script>
require('./../jquery.mask.min.js');
export default {
mounted: function () {
$('.date').mask('00/00/0000');
console.log('name ' + this.input-name);
},
props: ['input-name']
}
</script>
I also tried:
props: ['input_name']
In another component and in a blade file I am calling it like this:
<date-input :input-name="delivery_date"></date-input>
When I run it in the browser I get this error:
[Vue warn]: Property or method "delivery_date" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in )
Why do I get this error?
The console.log gives me undefined.
Also, how do I put the value I send (delivery_date) into the input name in the template?
I tried:
<input type="text" name="{{ input-name }}" class="form-control date">
But that broke npm run dev.