Странное поведение методов в Vue.js

Question

У меня есть одна переменная data в моем приложении, это message, а также у меня есть один метод в методах, который выполняет некоторые криптографические алгоритмы.Вот мой код.

export default {
  data: () => ({
    message: ""
  }),
  methods: {
    click() {
      this.message = "Hello";
      console.log("this.message ", this.message); // Prints "Hello"

      // takes around 8 seconds
      var encryptedPassphrase = generateKeystore();
      console.log("this.message ", this.message); // Prints "Hello"
    }
  }
};

Выше message переменной, которую я отображаю в теге HTML, и метод click вызывается из кнопки Vuetify.Ниже приведен HTML-код,

<div>
    <p>{{message}}</p>
    <v-btn @click="click">Click</v-btn>
</div>

Issue
Теперь проблема в том, что когда метод click вызывается первой задачей, он обновляет переменную message, но это messageОбновление переменной отражается в HTML после полного выполнения функции.Поэтому в функции click следующая задача - криптографическое вычисление, которое занимает около 8 секунд, после чего message отражается в HTML.Я понятия не имею, что здесь происходит.Просто упомяну, что я использую webpack здесь.

Обновление

  <v-btn @click="update(); click();">Click</v-btn>

Даже это не работает, Здесь update метод обновляет message переменную, Он обновляется после click функция завершена.

Answer 1

Если вы хотите, чтобы поле данных сообщения, которое было изменено в методе щелчка, отображалось в html до его завершения, вы должны обернуть криптографическую функцию в Vue.nextTick. Это обеспечит выполнение логики внутри nextTick в следующем цикле обновления DOM. Это позволит обновлять DOM последним значением для сообщения, а затем выполнит криптографическую функцию. В противном случае Vue будет ожидать завершения функции щелчка, прежде чем изменения будут отражены в DOM.

Vue.nextTick(function() { //cryptographic function })

https://vuejs.org/v2/api/#Vue-nextTick