我在Nuxt.js上有一个应用程序,它使用v-form
和v-select
。
我看到了一个问题,即按Enter键会引发问题,而该问题是在GitHub上没有选定信息的情况下提交的。
因此,我在应用程序的@keydown.enter.native.prevent
中添加了v-select
,在window.addEventListener('keyup', this.onClickNext)
内部添加了mounted()
。
可以,但是我意识到,老板对我说,这种方式效率低下。
我不想使用addEventListener
。我想提交v-btn
。
因此,我在v-btn中添加了@keyup.enter='onClickNext'
,但是不幸的是,按下Enter键会调用打开的v-select
并显示选择列表,并且绝对不会调用onClickNext
。
这是代码。
<template lang='pug'>
v-content
v-container.pt-0(fluid)
v-layout(row, wrap, align-center, justify-center, style='height: 36px;')
v-flex.text-xs-center(xs12, sm8, md4)
p.title {{ $t('word.select_organization') }}
v-layout(row, wrap, align-center, justify-center)
v-flex.text-xs-center(xs12, sm8, md4)
v-form
v-select(
required,
prepend-icon='local_hospital',
v-bind:label=`$t('activerecord.attributes.organization.name')`,
v-bind:items='option_organizations',
v-model='form.organization_id'
@keydown.enter.native.prevent)
v-btn(
block,
color='primary',
v-bind:loading='form.isLoading',
v-bind:disabled='!isInputsValid',
v-on:click='onClickNext',
@keyup.enter='onClickNext') {{ $t('word.next') }}
</template>
<script>
export default {
data() {
return {
form: {
organization_id: null,
isLoading: false
}
}
},
computed: {
session() {
return this.$store.state.session
},
remoteInterview() {
return this.$store.state.api_remote_interview.remoteInterview
},
option_organizations() {
return this.$store.state.api_organization.organizations.map((organization) => {
return { value: organization.id, text: organization.attributes.name }
})
},
isInputsValid() {
if (this.form.organization_id == null) {
return false
}
return true
}
},
mounted() {
this.form = Object.assign({}, {
id: this.remoteInterview.id,
organization_id: null,
isLoading: false
})
},
methods: {
onClickNext() {
if (!this.isInputsValid) {
return
}
this.form.isLoading = true
this.$store.dispatch('api_remote_interview/updateRemoteInterview', this.form).then((resp) => {
return this.$store.dispatch('api_interview/indexInterviews', { organization_id: this.form.organization_id })
}).then((resp) => {
this.$router.replace('/interview')
this.form.isLoading = false
}).catch((err) => {
console.log(JSON.parse(JSON.stringify(err)))
})
}
}
}
</script>
我希望您告诉我按Enter键的方式不会调用打开v-select
和显示选择列表的方式,只会调用onClickNext
。