You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm trying to get the result of my crop in my setup function. According to the docs, this is the way in options API const { coordinates, canvas, } = this.$refs.cropper.getResult();. The composition way of doing this is like so:
<scriptsetup>
import {ref,onMounted} from 'vue';
import {Cropper} from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css'
const cropper = ref(null) // Does not work
const title = ref(null) // Works
onMounted(() =>{console.log(cropper.value)console.log(title.value)})
const cropperImage = ref('https://images.unsplash.com/photo-1600984575359-310ae7b6bdf2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80')
</script><template><h1ref="title">Some Value</h1><cropper
ref="cropper"class="cropper" :src="cropperImage"style="margin: auto;"
:stencil-props="{ aspectRatio: 1, movable: false, resizable: false, handlers: {}, }"
:resize-image="{ adjustStencil: false, }"image-restriction="stencil"/><labelfor="image"value="Image"/><inputtype="file"name="image"ref="image"class="form-control" @change="setImage"/></template><style>
.cropper {height: 200px;width: 200px;background: #DDD;}</style>
For the Cropper I get many warnings: Component is missing template or render function, Invalid vnode type when creating vnode: null. Over and over again. And the Component doesn't render.
It works without the syntactic sugar:
<script>
import {ref,onMounted} from 'vue';
import {Cropper} from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css'
export default {components: {
Cropper,},setup(){const cropper =ref(null)consttitle=ref(null)onMounted(()=>{console.log(cropper.value)console.log(title.value)})constcropperImage=ref('https://images.unsplash.com/photo-1600984575359-310ae7b6bdf2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80')return{cropper,
title,
cropperImage,}},}</script>
Any help is greatly appreciated.
The text was updated successfully, but these errors were encountered:
I'm trying to get the result of my crop in my setup function. According to the docs, this is the way in options API
const { coordinates, canvas, } = this.$refs.cropper.getResult();
. The composition way of doing this is like so:For the Cropper I get many warnings:
Component is missing template or render function
,Invalid vnode type when creating vnode: null.
Over and over again. And the Component doesn't render.It works without the syntactic sugar:
Any help is greatly appreciated.
The text was updated successfully, but these errors were encountered: