I have an authentication form which works fine on chrome, firefox and edge.
<el-form :model="auth">
<el-form-item class="form-item" label="Email">
<el-input v-model="auth.email" placeholder="Email"></el-input>
</el-form-item>
<el-form-item class="form-item" label="Password">
<el-input type="password" v-model="auth.password" prop="password"></el-input>
</el-form-item>
<el-button class="submit-button" type="primary" #click="signIn">Login</el-button>
</el-form>
When enter is pressed, the signIn function is called and which return sends the auth object - The login is successful which is the usual case.
In IE11 browser, the password value is always empty that is
{"email":"someEmail#example.com", password:"" }
The above object is sent as request when enter key is pressed.
Is there any polyfill for this or am I missing something for IE11 in vuejs?
Thanks.
Looks like you're using Element and I don't see any prop attribute in the documentation for inputs. Since native HTML inputs don't have a prop attribute either, IE11 could be having an issue with the password input because it doesn't know what to do with prop="password".
Added #keyup.enter.native="signIn" in the el-form tag and it works.
Related
I have two text input fields in my vuetify form and I want to test validation errors for each of them separately. but I can't find a way to make sure which error element belongs to which input. I mean I can't find the proper selector.
This is a pseudo form:
<v-text-field
...
:error-messages="emailErrors"
data-cy="email"
></v-text-field>
<v-text-field
...
:error-messages="passwordErrors"
data-cy="password"
></v-text-field>
<v-btn type="submit" >Login</v-btn>
And this is the result produced when form has some validation errors for password field:
<div class="v-input v-input--has-state">
<div class="v-input__control">
<div class="v-input__slot">
<div class="v-text-field__slot">
<input data-cy="password" id="input-29" type="text" />
</div>
</div>
<div class="v-text-field__details">
<div class="...." role="alert">
<div class="...">
<div class="v-messages__message">password is required</div>
</div>
</div>
</div>
</div>
</div>
Notice how data-cy is acting as an attribute for input field only, therefor can not be used to find error element related to password, I can create cypress test to check if there are any validation errors in the form like this:
it('shows password validation error', () => {
cy.visit(loginUrl)
cy.cyElement('email').type('test#email.com')
// do not fill password
cy.get('button').submit()
cy.get('.v-messages__message').should('not.be.empty')
})
but I can't make sure that this validation element is really related to the password! it just checks if there are any validation errors in the form and asserts ok if yes.
One way to do it would be wrapping all vuetify components inside but it is not perfect at all.
Thank you so much in Advance!
It seems like a traversal task. You can use parents() to navigate to the common parent, and then find() the children with the specific class 'v-messages__message'.
cy.get("[data-cy=email]")
.parents(".v-input__control")
.find(".v-messages__message")
.should("contain.text", "email is required")
Here is a handy cheatsheet with all the commands available in traversing the dom: https://example.cypress.io/commands/traversal
While Igor's answer is technically correct, you don't need to know so much about the structure of the app.
Since contains works on the element specified and it's children, you can assert the message exists somewhere on the form.
cy.get('[data-cy="email"]')
.parents('form')
.should('contain', 'password is required')
or if you have data-cy="login-form" on the <v-form>,
cy.get('[data-cy="login-form"]')
.should('contain', 'password is required')
I am not able to use vue on blur event,
In my component I have a #change directive
<b-input :value="value" #change="validateEmail($event)" #input="$emit('input', $event)" ref="input" :state="state"/>
This is because #blur doesn't seem to work.
Bootstrap vue on:blur handler is not been called
This works partially when I am changing the input and hit tab, then works, but if I focus on the input and click tab without changing the input, it doesn't work.
I want to show a message that email is required in this case but I cannot.
You may use #blur.native with Bootstrap Vue inputs.
<b-input
:value="value"
#change="validateEmail($event)"
#input="$emit('input', $event)"
ref="input"
:state="state"
#blur.native="handleBlur"
/>
https://github.com/bootstrap-vue/bootstrap-vue/issues/1645#issuecomment-369477878
you can use #blur.native="function"
I have a question and maybe a Vue bugg.
I have a custom component that needs a #change.native event. But it does not trigger anything and I could not find anything about this issue myself.
So i tried some different stuff and like #click.native and #input.native does work. Even tho #input.native works and do the trick i want to, i still want to know why the change event does not work.
Anybody? Else I should report this.
Vue version: 2.5.2
<custom-input type="search"
placeholder="search"
v-model="search"
#input.native="change" />
If the <input /> inside the custom component is a child element of another element, then the event listener bound by the .native modifier will not be reached, since it is listening to the event of a different element.
custom-input.vue:
<template>
<div>
<input :value="someValue" />
</div>
</template>
<script>
export default {
props: ['value']
}
</script>
so if you have this scenario, then the #change.native will be bound on the <div> (the wrapper).
(sadly) You need to manually propagate the event manually.
I want to put a name="name" attribute in a buefy input control. I have so far, not managed to make it work.
<b-field label="Fullname">
<b-input
value=""
icon="face"
name="name">
</b-input>
</b-field>
It sends empty values and I get an error in laravel:
"Column 'name' cannot be null"
It worked when I tried using a native html input control.
I have also tried using developer tools to inspect the DOM, it appears, the b-input control does not have a name.
How do I solve this?
Edit:
I had vue#2.1.10 and for buefy you need 2.4, that's why I got this bug. Sorry, my bad.
Use v-model to bind your component to your data.
In your <template>...</template>:
<b-field label="Fullname">
<b-input
v-model="fullname"
icon="face">
</b-input>
</b-field>
In your <script>...</script>:
data () {
fullname: null,
//some more state...
},
Is it possible to use ref with el-input component from Element-UI? I am trying to use $refsto focus on the input when my Vue instance is mounted. Here is my code:
<div id="app">
<el-input type="text" ref="test" placeholder="enter text"></el-input>
</div>
And in my Vue instance:
new Vue({
el: "#app",
mounted(){
this.$refs.test.focus()
}
})
The focus method is not working at all, even if I move this.$refs.test.focus() into a method and try to trigger it through an event.
The $refs object stores Vue components and should be working fine. The problem is that you are attempting to invoke a focus method which doesn't exist in the component, but rather on an input somewhere inside the component's template.
So, to actually find the input you'd have to do something like this:
this.$refs.test.$el.getElementsByTagName('input')[0].focus();
Not the prettiest line of code ever made, right? So, instead of calling anything in your app's mounted method, if you want to autofocus on the input, just do this:
<el-input type="text" placeholder="enter text" autofocus></el-input>
This can be also solved your problem.
// Focus the component, but we have to wait
// so that it will be showing first.
this.$nextTick(() => {
this.$refs.inputText.focus();
});
Now you can use it like this
<div id="app">
<el-input type="text" ref="test" placeholder="enter text"></el-input>
</div>
this.$refs.test.focus();
https://element.eleme.io/#/en-US/component/input#input-methods