Vue - 高度なクロッパー (Uncaught TypeError: this.$refs.cropper.getResult は関数ではありません)

Question

以下に示すように、Vue Advanced Cropper のトリミング機能があります:

リーリー

私のHTML:

リーリー

Cropper のインポートを含めました:

リーリー

package.json のバージョン:

リーリー

以下のような Crop 関数に到達するまでは、すべてが正常に動作します。

Uncaught TypeError: this.$refs.cropper.getResult は関数ではありません

最初に考えたのは、複数の画像をループすることに関係があるのではないかということでしたが、1 つの画像だけでは機能しません。ディスクのパーツを組み合わせて、ここからサーバーにアップロードしてみました。 https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server

＃＃＃ - - 編集 - -＃＃＃

デフォルト値もエクスポートし、トリミングは機能しましたが、結果は得られませんでした:

リーリー

Answer 1

aleksKamb は適切な解決策を見つけました。インデックスを適用すると、機能しているようです。 v-for を次のように編集しました:

リーリー

次に、クロップ関数を次のように編集しました:

リーリー

Answer 2

v-for 内のすべての要素に同じ参照名を使用していることを考慮すると、this.$refs.cropper はおそらく配列です。これは Vue のバージョンにも依存します。この場合、呼び出し元要素のインデックスがわかって getResult が正しく呼び出せるように、クリッピング関数に引数を渡す必要がある場合があります。

this.$refs をコンソールに記録してみてください。 このスレッドが役立つかどうかも確認してください。 v-for Vue.js ループ内の参照