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"
Related
I'm trying to use Buefy's tooltip with a content slot, so insted of using the label prop to set tooltip's text, I could use HTML tags to format my text.
I tried to check the component source code, and there is indeed a content slot, but it is not working. Here is my code:
<b-tooltip
position="is-left"
>
<template #content>
My <b>content</b> here
</template>
<b-input
v-on:keyup.native.enter="onEnter"
type="password"
v-model="password"
placeholder="Enter Password"
password-reveal
class="custom-input-style password-field"
></b-input>
</b-tooltip>
Check your buefy version, if it is below 0.9.0 then it won't work
I’m following this documentation: https://v2.vuejs.org/v2/guide/components.html
I created custom v-text-field component which looks like that:
<template>
<div>
<v-text-field
:label="label"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"></v-text-field>
</div>
</template>
<script>
export default {
name: "txtbox",
props: ['value', 'label'],
}
</script>
I implemented it in my main component almost succesfully:
<txtbox
label="Name"
v-model="eventName"
/>
I don’t think it is necessary to paste all the code, but if it is I will edit the post. Here is how it works:
I have a list, when i click on the list element the text-field displays content of it, this works fine. Sadly when I’m editing the content of text-field the v-model value is not updating. I can also add that it works fine with normal (like in the docs) instead of . Is there anything I can do to make it work, or should i use simple input ?
Thanks
When you want to $emit the new value, you just have to emit the $event, and not $event.target.value
<template>
<div>
<v-text-field
:label="label"
v-bind:value="value"
v-on:input="$emit('input', $event)"></v-text-field>
</div>
</template>
v-on:input can also be shortened to just #input
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 am using vue-multiselect component in my vue.js project, I am using v-on directive to execute a function on the change event ,
<multiselect v-model="selected" :options="projects" :searchable="false" :custom-label="customLabel" track-by="name" v-on:change="executeLoader">
<template slot="customLabel" slot-scope="{ customLabel }"><strong>{{ option.name }}</strong></template>
</multiselect>
I have example full code here: https://codesandbox.io/s/yjjon0vzxj
the v-on:change was working with <select> component but it stopped workigng with vue-multiselect ! I tried with v-on:click="executeLoader" but that too didnt worked either..
#click will not trigger the method executeLoader with vue multiselect. You can use #input - which is similar to v-on:change, #close, #select as in example below:
<multiselect placeholder="Pick at least one"
select-label="Enter doesn’t work here!"
:value="value"
:options="options"
:multiple="true"
:searchable="true"
:allow-empty="false"
:hide-selected="true"
:max-height="150"
:max="3"
:disabled="isDisabled"
:block-keys="['Tab', 'Enter']"
#input="onChange"
#close="onTouch"
#select="onSelect">
</multiselect>
In your case I would try #input="executeLoader"
In vue-multiselect, since it is a component you can't treat it to behave like a simple <select> element.
In components, when you expect them to behave and "listen" to click events just like other html tag, then you should add an event modifier called: .native.
So, you can do on any component:
<... #click.native="executeLoader" />
But that is not what you are looking for I think. You want to trigger a function when you add more and more tags, or in short: when the selected items increase.
for that, vue-multiselect exposes the #input event, so you can handle using:
<... #input="executeLoader" />
And now just call executeLoader and accept the arguments as:
methods: {
executeLoader(selectedItems) {}
}
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