I am currently using Vue JS 2 to develop an image uploader functionality. The input in question has a change function that triggers a function and sets the selected file to the v-model property.
After logging the data, I noticed that only an empty object is being set instead of the actual image. This issue is also causing the Vee Validate rule to fail as it detects the data as empty.
What could be missing in my implementation?
This is the HTML code snippet for uploading a logo:
<validation-observer ref="brandCreationForm" v-slot="{ handleSubmit }">
<form class="space-y-6" @submit.stop.prevent="handleSubmit(create)">
<validation-observer :key="1" class="space-y-6">
<pre>
{{ form }}
</pre>
<!-- Rest of the HTML code omitted for brevity -->
</validation-observer>
</form>
</validation-observer>
A specific function within my script runs as follows:
<script>
export default {
// Layout and data setup goes here
methods: {
// Create brand and upload image functions are defined here
}
}
</script>
The issue arises when adding an image where the form should ideally contain all information related to the image, but instead shows up as an empty object as depicted in the screenshot below:
https://i.stack.imgur.com/YuIex.png
Attempts such as using JSON.stringify before setting the model have been made, but unfortunately without success.