Vue - Advanced Cropper (Uncaught TypeError: this.$refs.cropper.getResult bukan fungsi)

Question

Saya mempunyai fungsi tanaman dengan Vue Advanced Cropper seperti yang ditunjukkan di bawah:

crop() {
            const { canvas } = this.$refs.cropper.getResult();
            if (canvas) {
                const form = new FormData();
                canvas.toBlob(blob => {
                    form.append('files[]', blob);
                    // Perhaps you should add the setting appropriate file format here
                }, 'image/jpeg');

                this.formData = form;

            }

        },

HTML Saya:

<div v-if="cropView">
    <h1>Step 2: Crop images</h1>
    <div class="upload-example__cropper-wrapper">
        <div v-for="image in this.images" :key="image">
            <cropper ref="cropper" class="upload-example__cropper"
                     check-orientation :src="image.src"/>
            <button v-if="image.src" class="upload-example__button" @click="crop">Crop</button>
            <!--<div class="upload-example__reset-button" title="Reset Image" @click="reset()"></div>-->
            <div class="upload-example__file-type" v-if="image.type">
                {{ image.type }}
            </div>
        </div>
    </div>
</div>

Saya telah sertakan import untuk Cropper:

import {Cropper} from 'vue-advanced-cropper'

Versi dalam

package.json:

"vue-advanced-cropper": "^2.8.1"

Semuanya berfungsi dengan baik sehingga saya sampai ke fungsi pemangkasan yang menyatakan perkara berikut:

Uncaught TypeError: this.$refs.cropper.getResult bukan fungsi

Fikiran pertama saya ialah ia mungkin ada kaitan dengan menggelung berbilang imej, tetapi ia juga tidak berfungsi dengan hanya satu imej. Saya cuba menggabungkan bahagian dari cakera dan memuat naik ke pelayan dari sini: https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server

---Edit ---

Saya juga mempunyai lalai eksport dan pemangkasan berfungsi, cuma saya tidak mendapat keputusan:

export default {

    components: {
        Cropper,
    },

Answer 1

aleksKamb menemui penyelesaian yang tepat. Selepas menggunakan indeks nampaknya berfungsi. Saya mengedit v-for kepada:

            
            Crop
            
            

                {{ image.type }}
            
        

Kemudian saya menyunting fungsi tanaman kepada:

crop(index) {
            const { canvas } = this.$refs.cropper[index].getResult();
            if (canvas) {
                const form = new FormData();
                canvas.toBlob(blob => {
                    form.append('files[]', blob);
                    // Perhaps you should add the setting appropriate file format here
                }, 'image/jpeg');

            }
        },

Answer 2

Memandangkan anda menggunakan nama rujukan yang sama untuk setiap elemen dalam v-for anda, ini.$refs.cropper mungkin merupakan tatasusunan. Ini juga bergantung pada versi Vue anda. Jika ini berlaku, anda mungkin perlu menghantar hujah kepada fungsi keratan anda supaya indeks elemen panggilan diketahui dan getResult boleh dipanggil dengan betul.

Cuba log masuk konsol ini.$refs. Lihat juga sama ada benang ini berguna? Rujukan Vue.js di dalam gelung v-untuk