我想在停用v-select的输入后提交带有v-btn的选择

时间:2019-08-22 16:51:37

标签: javascript vue.js nuxt

我在Nuxt.js上有一个应用程序,它使用v-formv-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

0 个答案:

没有答案