Почему мой код получает пустое или пустое значение из моего ввода?

Question

В настоящее время я изучаю Ionic, используя Vue (с предыдущим знанием od Vue), я делаю некоторые основные действия и пытался передать значение из входных данных на сторону javascript и показать входной текст или значение внутри предупреждения или в консоли, но когда я вызываю метод, который делает это, я получаю только пустую или пустую строку, так как поле ввода было пустым.

Я использую Ionic 4 и Vue.js, в прошлом я использовал только Vue и у меня не было проблем с такими вещами.

<template>
  <div>
    <ion-item>
      <ion-label position="floating">Floating Label</ion-label>
      <ion-input v-model="input" @keyup.enter="show"></ion-input>
    </ion-item>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        input: ""
      }
    },
    methods: {
      show() {
        alert(this.input)
      }
    }
  }
 </script>

Я ожидаю, что вывод будет иметь то же значение, что и ввод, но в консоли я получаю пустую или пустую строку.

Answer 1

Поместите предупреждение в блок $nextTick, чтобы убедиться, что модель обновляется. Событие keyup вызывается до того, как произойдет обновление.

В vue вы также можете добавить watch. Гораздо лучше, чем использование привязок клавиш.

watch:{
 input(value){
  alert(value);
 }
}

И если вам нужно только значение enter или blur, используйте модификатор lazy в v-модели.