Estoy tratando de establecer el valor inicial del campo de entrada de la imagen. Los documentos dicen que necesitamos proporcionar una matriz de objetos que contengan URL. ( enlace a documentos)
He establecido el valor en el mismo formato pero no funciona. Otros campos ('texto', 'correo electrónico', etc.) no tienen este problema.
<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>Aquí está el enlace a codesandbox: https://codesandbox.io/s/vue-formulate-demo-forked-y7288r?file=/src/components/TestForm.vue
No tengo idea de cómo Vue Formulate maneja el valor inicial de las imágenes, pero volver a renderizar el componente después de iniciar las URL de la imagen es el truco.
<template> <div class="w-full md:w-1/3"> <FormulateForm :schema="formSchema" v-model="values" class="mt-6" :key="randomKey" @submit="submitHandler" /> <button class="custom-button" type="button" @click="handlePopulateImage"> Populate image </button> </div> </template> <script> export default { name: "testForm", data() { return { randomKey: Math.random(), 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", }, ]; this.randomKey = Math.random(); }, submitHandler() { alert(`Thank you ${this.values.name}`); }, }, }; </script> <style scoped> .custom-button { background-color: orange; padding: 1rem; border-radius: 5px; } </style>Enlace de Codesandbox: https://codesandbox.io/s/vue-formulate-demo-forked-c86uwt?file=/src/components/TestForm.vue