Vue - 高級 Cropper（未捕獲類型錯誤：this.$refs.cropper.getResult 不是函數）

Question

我有一個 Vue Advanced Cropper 的裁剪功能，如下所示：

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：

<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>

我已經包含了 Cropper 的導入：

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

package.json 中的版本：

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

一切正常，直到我到達裁剪功能，其中顯示以下內容：

# 未捕獲類型錯誤：this.$refs.cropper.getResult不是函數

我的第一個想法是，它可能與循環多個圖像有關，但是它也不適用於僅一個圖像。我嘗試將光碟中的部分組合起來並從這裡上傳到伺服器： https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#upload-image-to-a-server

--- 編輯 ---

我也有匯出預設值，並且裁切有效，只是沒有得到結果：

export default {

    components: {
        Cropper,
    },

#

Answer 1

aleksKamb 找到了正確的解決方案。應用索引後，它似乎正在工作。我將 v-for 編輯為：

            
            Crop
            
            

                {{ image.type }}
            
        

然後我將裁剪函數編輯為：

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

考慮到您對 v-for 中的每個元素使用相同的引用名稱， this.$refs.cropper 可能是一個陣列。這也取決於您的 Vue 版本。如果是這種情況，您可能必須將參數傳遞給您的裁剪函數，以便知道呼叫元素的索引並可以正確呼叫 getResult。

嘗試控制台記錄 this.$refs。 也可以看看這個線程是否有用？ v-for 迴圈內的 Vue.js 參考