Having trouble setting the initial value for the image input field? The documentation suggests providing an array of objects with URLs (link to docs).
I've followed the same format for other fields like 'text' and 'email', which work fine.
<template>
<div class="w-full md:w-1/3">
<FormulateForm
:schema="formSchema"
v-model="values"
class="mt-6"
@submit="submitHandler"
/>
<button class="custom-button" type="button" @click="handlePopulateImage">
Populate image
</button>
</div>
</template>
<script>
export default {
name: "testForm",
data() {
return {
values: {
name: "",
image: [],
},
formSchema: [
{
type: "text",
name: "name",
label: "Name",
validation: "required",
},
{
type: "image",
name: "image",
label: "Image",
validation: "required",
},
{
type: "submit",
label: "Login",
},
],
};
},
methods: {
handlePopulateImage() {
// this works 👍-----------------------------
this.values.name = "Test Name (edited)";
// this doesn't work 😭----------------------
this.values.image = [
{
url:
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/John_Cena_July_2018.jpg/220px-John_Cena_July_2018.jpg",
name: "test_name.png",
},
];
},
submitHandler() {
alert(`Thank you ${this.values.name}`);
},
},
};
</script>
<style scoped>
.custom-button {
background-color: orange;
padding: 1rem;
border-radius: 5px;
}
</style>
Check out the codesandbox link for more details: https://codesandbox.io/s/vue-formulate-demo-forked-y7288r?file=/src/components/TestForm.vue