Issue while setting the value of file/image input field with Vue Formulate

Question

I'm trying to set the initial value of the image input field. The docs say that we need to provide an array of objects containing URLs. (link to docs)

I have set the value in the same format but it isn't working. Other fields ('text', 'email', etc) don't have this issue.

<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>

Here is the link to the codesandbox: https://codesandbox.io/s/vue-formulate-demo-forked-y7288r?file=/src/components/TestForm.vue

Answer 1

I have no idea how Vue Formulate handles the initial value of images but re-rendering the component after initiliznig image urls does the trick.

<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>

Codesandbox link: https://codesandbox.io/s/vue-formulate-demo-forked-c86uwt?file=/src/components/TestForm.vue