【vue.js】v-onで複数のメソッドを呼ぶ時に１つのメソッドが完全処理されてから次のメソッドを実行する方法【Nuxt.js】

現在このようにコードを書いているのですが、このコードの場合croppa.chooseFile()が処理が終わってない段階でtest.addFile()が呼び出されてしまうのですが、croppa.chooseFile()の処理が完全に終わってからtest.addFile()が呼び出される方法はありますか？
ちなみにcroppa.chooseFile()はプラグインの既存のメソッドでそのメソッドの中にtest.addFile()が埋め込めません。

      <button ref="file" @click="croppa.chooseFile(); test.addFile()">Chose File...</button>

行動規範の内容に同意します

回答1件

ベストアンサー

https://github.com/zhanziyang/vue-croppa
@file-choose="handleCroppaFileChoose"っていうのがあるので
こんな感じかな

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<link href="https://unpkg.com/vue-croppa/dist/vue-croppa.min.css" rel="stylesheet" type="text/css">
6<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7<script src="https://unpkg.com/vue-croppa/dist/vue-croppa.min.js"></script>
8</head>
9<body>
10<div id="app">
11  <croppa v-model="croppa" 
12          disable-click-to-choose
13          placeholder="click button on the right :)"
14          :placeholder-font-size="14"
15          @file-choose="handleCroppaFileChoose">
16  </croppa>
17  <button @click="onClick();">CHOOSE FILE...</button>
18</div>
19</body>
20<script>
21Vue.use(Croppa);
22new Vue({
23  el: '#app',
24  data: {
25    croppa: {
26    },
27  },
28  methods: {
29    onClick: function() {
30      this.croppa.chooseFile();
31    },
32    handleCroppaFileChoose: function(e) {
33      console.log(e);
34      alert('hoge');
35    }
36  }
37});
38</script>
39</html>