Vue - 고급 자르기 도구(잡히지 않은 TypeError: this.$refs.cropper.getResult는 함수가 아닙니다)

Question

Vue Advanced Cropper에는 아래와 같이 자르기 기능이 있습니다.

으아악

내 HTML:

으아악

Cropper에 대한 가져오기를 포함했습니다:

으아악

package.json 버전:

으아악

다음과 같은 자르기 기능에 도달할 때까지 모든 것이 잘 작동합니다.

잡히지 않은 TypeError: this.$refs.cropper.getResult는 함수가 아닙니다

첫 번째 생각은 여러 이미지를 반복하는 것과 관련이 있을 수 있다는 것이었지만, 하나의 이미지만으로는 작동하지 않습니다. 디스크의 부품을 결합하고 여기에서 서버에 업로드해 보았습니다. 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 참조