im wondering why my code isn’t working. I have an event ‘leave’ which should be called on blur. The components are displayed properly but when i leave the inputs the event wont be triggered.
Vue.component('text-input', { props:['args'], template: '<input :id="args.id" :type="args.type"/>' }) App = new Vue({ el : '#app', data: { inputs : [ { id : 'nickname', type : 'text'}, { id : 'email' , type:'email'}, ] }, methods : { leave : function(event) { var id = $(event.target).attr('id'); console.log('left object ' + id); } } })
<div id='app'> <div class="form-group"> <text-input class="form-control" v-for="input in inputs" v-bind:args="input" v-bind:key="input.id" v-model="input.id" v-on:blur="leave" /> </div> </div>
Thanks for your help 🙂
Advertisement
Answer
Your <text-input>
component needs to forward (re-emit) the blur
event from the inner <input>
element:
// text-input template: `<input @blur="$emit('blur')">`
Then, <text-input>
‘s parent could receive it:
// parent of text-input <text-input @blur="leave" />
Vue.component('text-input', { props:['args'], template: `<input :id="args.id" :type="args.type" @blur="$emit('blur', $event)"/>` }) new Vue({ el: '#app', data() { return { inputs: [ {id: 1}, {id: 2}, ] } }, methods: { leave(e) { console.log('leave', e.target.id) } } })
<script src="https://unpkg.com/vue@2.5.16"></script> <div id="app"> <div class="form-group"> <text-input class="form-control" v-for="input in inputs" v-bind:args="input" v-bind:key="input.id" v-model="input.id" v-on:blur="leave" /> </div> </div>