Level 53
It's @keyup.tab or v-on:keyup.tab
1 like
Dec 21, 2016
6
Level 8
@keyUp.tab vs @keyUp.right
Hello, vuejs newbie here. Trying to use the @keyUp.tab on an input, can't seem to get it to work. Strangely enough @keyUp.right works just fine! Using Bootstrap 3 with jQuery as loaded by default in app.js. Any suggestions?
Level 8
hey @ejdelmonico I've got this in my input element:
v-on:keyup.tab="getInfo"
Still not working though.
v-on:keyup.right="getInfo"
is working?
Level 53
show your vue code with getInfo method
Level 8
thank you for helping @ejdelmonico here's the code. Vue component + template
Vue.component('material-receipt', {
data() {
return {
shipmentData: {
"UoM": "pcs"
},
}
},
mounted() {
console.log('mounted');
},
methods: {
getInfo() {
this.$http.get('/api/material/receipt/' + this.shipmentData.WDRNo)
.then(response => {
this.shipmentData = response.data;
})
;
}
}
});
<material-receipt inline-template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Material Receipt</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<fieldset>
<!-- Part Number input-->
<div class="form-group">
<label class="col-md-4 control-label" for="wdr_number">WDR No.</label>
<div class="col-md-5">
<input v-model="shipmentData.WDRNo"
v-on:keyup.tab="getInfo"
v-on:keyup.right="getInfo"
id="wdr_number" name="wdr_number" type="search" placeholder=""
class="form-control input-md">
</div>
</div>
... more form stuff ...
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="button1id"></label>
<div class="col-md-5">
<button id="post" name="post" class="btn btn-lg btn-success">Post Material
Receipt
</button>
<button id="cancel" name="cancel" class="btn btn-sm btn-link">Cancel
</button>
</div>
</div>
</fieldset>
</form>
Level 53
Ok, I see what could be the issue. You might not know this but you can chain in vue. So your input should have v-on:keyup.right.tab. Also, if tab is still not working, try using enter. If both work then, it is a key mapping issue with your computer or you found a bug in vue.
1 like
Level 8
Interesting.. Issue 3170.
v-on:keydown.tab="getInfo"
That works fine!
@ejdelmonico again thanks for your time, should've searched the issue tracker first.
Please or to participate in this conversation.