表單正在監聽輸入鍵 Vue

Question

我在 Nuxt 中制作了一個表單組件（CreateDocument）。 在這個組件中，我還做了一個自動完成（AutoCompleteFilters）。

當我在自動完成組件中按回車鍵時，CreateDocument 也在監聽回車鍵。 但我只希望一個特定的輸入字段列出到輸入鍵事件。

這是 CreateDocument 組件：

 <template>
  <div>
  <Notification :message="notification" v-if="notification"/>
  <form method="post" @submit.prevent="createDocument">
    <div class="create__document-new-document">
      <div class="create__document-new-document-title">
        <label>Titel</label>
        <input
          type="text"
          class="input"
          name="title"
          v-model="title"
          required
        >
      </div>
      <div class="create__document-new-document-textarea">
        <editor
          apiKey="nothing"
          v-model="text"
          initialValue=""
          :init="{
      height: 750,
      width: 1400
    }"
        >
        </editor>
      </div>
      <div class="create__document-new-document-extra-info">
        <div class="create__document-new-document-tags">
          <label>Tags</label>
          <AutoCompleteFilters/>
        </div>
        <div class="create__document-new-document-clients">
          <label>Klant</label>
          <input
            type="text"
            class="input"
            name="client"
            v-model="client"
            required
          >
        </div>
      </div>
      <Button buttonText="save" />
    </div>
  </form>
  </div>
</template>

<script>
  import Notification from '~/components/Notification'
  import Editor from '@tinymce/tinymce-vue'
  import Button from "../Button";
  import { mapGetters, mapActions } from 'vuex'
  import AutoCompleteFilters from "./filters/AutoCompleteFilters";


  export default {
    computed: {
      ...mapGetters({
        loggedInUser: 'loggedInUser',
      })
    },
    middleware: 'auth',
    components: {
      Notification,
      Button,
      editor: Editor,
      AutoCompleteFilters
    },

    data() {
      return {
        title: '',
        text: '',
        tags: '',
        client: '',
        notification: null,
      }
    },

    methods: {
      ...mapActions({
        create: 'document/create'
      }),
      createDocument () {
        const documentData = {
          title: this.title,
          text: this.text,
          tags: this.tags,
          client: this.client,
          userId: this.loggedInUser.userId
        };
        this.create(documentData).then((response) => {
          this.notification = response;
          this.title = '';
            this.text = '';
            this.tags = '';
            this.client= '';
        })
      }
    }

  }
</script>

這是 AutoCompleteFilters 組件：

    <template>
  <div class="autocomplete">
    <input
      type="text"
      id="my-input"
      @input="onChange"
      v-model="search"
      @keydown.down="onArrowDown"
      @keydown.up="onArrowUp"
      @keydown.enter="onEnter"
    />
    <ul
      v-show="isOpen"
      class="autocomplete-results"
    >
      <li
        v-for="result in results"
        :key="results.id"
        class="autocomplete-result"
        @click="setResult(result.name)"
        :class="{ 'is-active': results.indexOf(result) === arrowCounter }"
      >
        {{ result.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'

  export default {
    data() {
      return {
        isOpen: false,
        results: false,
        search: '',
        arrowCounter: 0,
        filter: null,
        position: 0
      };
    },

    methods: {
      ...mapActions({
        getFilterByCharacter: 'tags/getTagsFromDb'
      }),

      onChange(e) {
        this.isOpen = true;
        this.position = e.target.selectionStart;
      },

      setResult(result) {
        this.search = result;
        this.isOpen = false;
      },
      getResults(){
        this.getTagsByValue(this.search).then((response) => {
          this.results = response;
        });
      },

      async getTagsByValue(value){
        const filters = {autocompleteCharacter : value};
        return await this.getFilterByCharacter(filters);
      },

      onArrowDown() {
        if (this.arrowCounter < this.results.length) {
          this.arrowCounter = this.arrowCounter + 1;
        }
      },
      onArrowUp() {
        if (this.arrowCounter > 0) {
          this.arrowCounter = this.arrowCounter - 1;
        }
      },
      onEnter(evt) {
        this.search = this.results[this.arrowCounter].name;
        this.isOpen = false;
        this.arrowCounter = -1;
      }
    },
    watch: {
      search: function() {
        this.getResults();
      }
    },
  };
</script>

<style>
  .autocomplete {
    position: relative;
  }

  .autocomplete-results {
    padding: 0;
    margin: 0;
    border: 1px solid #eeeeee;
    height: 120px;
    overflow: auto;
    width: 100%;
  }

  .autocomplete-result {
    list-style: none;
    text-align: left;
    padding: 4px 2px;
    cursor: pointer;
  }

  .autocomplete-result.is-active,
  .autocomplete-result:hover {
    background-color: #4AAE9B;
    color: white;
  }

</style>

Answer 1

就像您在表單中所做的那樣避免“自然”表單提交並將其替換為自定義操作：

@submit.prevent="createDocument"

...當您在關注表單時按 Enter 鍵時，您必須防止默認提交preventDefault的“自然”事件。

為此，只需將.prevent添加到模板中的事件中：

@keydown.down.prevent="onArrowDown"
@keydown.up.prevent="onArrowUp"
@keydown.enter.prevent="onEnter"