[Vuejs]-Vue Js v-model not working with array created in Laravel model

by

0👍

✅

You should be using data not computed.

Try something like this:

<script>
  export default {
    props: {...},
    mounted () {
      //CODE THAT HANDLES DROPZONE UPLOAD
      // 2. handlers should call `onUpload`
    },
    name: 'InputMultipleUpload',
    data () {
      return {
        files: [], // 1. declaring `files` here makes it reactive 
        showUploadProgress: true,
      }
    },
    methods: {
      onUpload (file) {
        const meta = createdMeta = [{
          name: "caption",
          type: "text",
          value: ''
        }]
        this.files.push({file, meta}); // 3. push the new data onto the stack and the component will update
      }
    }
  }
</script>
👤davestewart

0👍

With this:

let createdMeta = formFields;
uploads.push({file,meta:createdMeta});

in a loop you actually just pass the reference to the same formFields array object and then binds all your inputs to it.

This is likely to work as it should, if you pass a new array copy for each input. You can do it easy this way:

let createdMeta = formFields.slice();
👤Nina Lisitsinskaya

0👍

let createdMeta = JSON.parse(JSON.stringify(formFields))

Thanks to Rick in Slack, and Dave Steward too, I have refactoring to do but for the purpose of this thread here is the solution

👤Lewis Cains

Leave a comment