keyup.enter: problem with select enter
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<el-form :model="form" :rules="rules" ref="form" label-width="100px">
<el-form-item label="Product" prop="productId">
<el-select v-model="form.productId" filterable @change="handleProductChange(form.productId)">
<el-option label="Zone one" value="shanghai"></el-option>
<el-option label="Zone two" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Qty" prop="qty">
<el-input v-model="form.qty" ref="qty" @keyup.enter.native="onSubmit('form')"></el-input>
</el-form-item>
<el-form-item label="Price" prop="price">
<el-input v-model="form.price" ref="price"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">Query</el-button>
</el-form-item>
</el-form>
</div>
Babel + JSX
var Main = {
data() {
return {
form: {
productId: '',
qty: '',
price:''
},
rules: {
productId: [
{required: true}
],
qty: [
{required: true},
{type: 'number', message: 'Paid amount must be a number'}
],
price: [
{required: true},
{type: 'number', message: 'Paid amount must be a number'}
],
}
}
},
methods: {
onSubmit(formName) {
console.log('submit!');
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submited');
} else {
return false;
}
});
},
handleProductChange(val){
console.log('change', val);
setTimeout(()=>{
this.$refs.qty.$el.querySelector('input').focus();
},500);
//this.$refs.qty.$el.querySelector('input').focus();
},
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')