Error in mounted hook: "TypeError: Cannot read property 'bind' of undefined"
NailsonCodens opened this issue · 26 comments
Help-me
@NailsonCodens please update the issue with more detailed context relevant to the plugin. Add your code maybe? Then I will re-open this. Thank you :)
My code is the same as git, it does not change anything.
When I put:
this. $ refs.croppieRef.bind ({
url: 'http://i.imgur.com/Fq2DMeH.jpg'
})
no mounted (), it returns me this error.
Error in mounted hook: "TypeError: Can not read property 'bind' of undefined"
and
Can not read property 'bind' of undefined
@NailsonCodens this error means that the croppieRef was not loaded successfully. Did you managed to add ref="croppieRef" to your template? Let me see your template please. Thanks.
<vue-croppie ref=croppieRef :enableOrientation="true" @result="result" @update="update"></vue-croppie>
<!-- the result -->
<img v-bind:src="cropped">
<button @click="bind()">Bind</button>
<!-- Rotate angle is Number -->
<button @click="rotate(-90)">Rotate Left</button>
<button @click="rotate(90)">Rotate Right</button>
<button @click="crop()">Crop Via Callback</button>
<button @click="cropViaEvent()">Crop Via Event</button>
<img :src="image" class="preview"/>
I can not enter the total code, a few pieces add up, but yes I put the ref = "CroppiecroppieRef"
I believe the sample was outdated. Could you use this instead?
<vue-croppie ref="croppieRef" :enableOrientation="true" @result="result" @update="update"></vue-croppie>
And also, please use proper code formatting in your comments next time. It will help people read your code easier.
I've used it with "" too, but it does not change anything
Ok
When I click on the bind, it runs smoothly, loads the photo and everything runs smoothly.
But if it needs to load when the page is mounted or a change event occurs, it does not work
Do this
this.$nextTick(() => {
this.$refs.croppieRef.bind();
});return Error in nextTick: "TypeError: Cannot read property 'bind' of undefined"
<vue-croppie ref="croppieRef" :enableOrientation="true" @result="result" @update="update"></vue-croppie>
<!-- the result -->
<img v-bind:src="cropped">
<button @click="bind()">Bind</button>
<!-- Rotate angle is Number -->
<button @click="rotate(-90)">Rotate Left</button>
<button @click="rotate(90)">Rotate Right</button>
<button @click="crop()">Crop Via Callback</button>
<button @click="cropViaEvent()">Crop Via Event</button>
<img :src="image" class="preview"/>const STATUS_INITIAL = 0
const STATUS_SAVING = 1
const STATUS_SUCCESS = 2
const STATUS_FAILED = 3
export default {
name: 'Logocompany',
props: ['namecompany'],
data () {
return {
name: '',
classmodal: '',
uploadedFiles: [],
uploadError: null,
currentStatus: null,
uploadFieldName: 'photos',
image: '',
cropped: null,
url: 'http://i.imgur.com/ecMUngU.jpg'
}
},
methods: {
Activemodal: function () {
this.classmodal = 'is-active'
},
Closemodal: function () {
this.classmodal = ''
},
reset () {
this.currentStatus = STATUS_INITIAL
this.uploadedFiles = []
this.uploadError = null
},
save (formData) {
console.log(formData)
this.currentStatus = STATUS_SAVING
},
filesChange (fieldName, fileList) {
console.log(fileList)
const formData = new FormData()
if (!fileList.length) return ''
Array
.from(Array(fileList.length).keys())
.map(x => {
formData.append(fieldName, fileList[x], fileList[x].name)
})
this.createImage(fileList[0])
},
createImage (file) {
// eslint-disable-next-line
var image = new Image()
var reader = new FileReader()
var vm = this
reader.onload = (e) => {
vm.image = e.target.result
}
reader.readAsDataURL(file)
},
bind: function () {
// Randomize cat photos, nothing special here.
let url = 'http://i.imgur.com/Fq2DMeH.jpg'
// Just like what we did with .bind({...}) on
// the mounted() function above.
this.$refs.croppieRef.bind({
url: url
})
},
// CALBACK USAGE
crop: function () {
// Here we are getting the result via callback function
// and set the result to this.cropped which is being
// used to display the result above.
let options = {
format: 'jpeg',
circle: true
}
this.$refs.croppieRef.result(options, (output) => {
this.cropped = output
})
},
// EVENT USAGE
cropViaEvent: function () {
// eslint-disable-next-line
this.$refs.croppieRef.result(this.options)
},
result: function (output) {
this.cropped = output
},
update: function (val) {
console.log(val)
},
rotate: function (rotationAngle) {
// Rotates the image
this.$refs.croppieRef.rotate(rotationAngle)
}
},
watch: {
namecompany: function () {
this.name = this.namecompany
}
},
computed: {
isInitial () {
return this.currentStatus === STATUS_INITIAL
},
isSaving () {
return this.currentStatus === STATUS_SAVING
},
isSuccess () {
return this.currentStatus === STATUS_SUCCESS
},
isFailed () {
return this.currentStatus === STATUS_FAILED
}
},
mounted () {
this.$nextTick(() => {
this.$refs.croppieRef.bind({ url: 'http://i.imgur.com/Fq2DMeH.jpg' })
})
this.reset()
}this is my code, it has some more functions, but nothing that interferes with croppie-vue
I found the problem, sorry, it was problem with my code.
@NailsonCodens so what happened?
was trying to get the code inside a modal that opens as the click happens, out of it runs ok, within the modal not
Check your modal if it has onload event or something then load croppie component after that event.
in fact, I just checked that my modal had a v-if, I switched to v-show and ran normal.
change v-if by v-show and put and put the code this $ $ ref.Croppie ... After the Event, it worked. Thank's for your time. @jofftiquez
Nice! I'm glad it worked! Kudos! Thanks for using my plugin 👍
Just one more question...
Only works with url?
I want to choose the photo with input file and load it inside the croppiebox
You can also pass base64 image.
This worked
var reader = new FileReader()
var vm = this
reader.onload = (e) => {
this.$refs.croppieRef.bind({ url: e.target.result })
}Thanks @jofftiquez ,
your plugin is sensational!
Spot on! Thanks @NailsonCodens
change v-if by v-show and put and put the code this $ $ ref.Croppie ... After the Event, it worked. Thank's for your time. @jofftiquez
Hi, facing same problem here, could you clarify this code ? How is it written specifically?
$ $ ref.Croppie ...