Updating object in vueJS

Question

I'm creating an upload VueJS component and I've this portion to display the images in the images object:

    <div class="row">
        <figure class="col-md-3" v-for="image in images">
            <img :src="'/'+image.image" :alt="image.description+'-'+image.image" class="img-responsive"
                 style="width:100%;">
        </figure>
    </div>

I want to know if there's a way yo image the images after every successful upload and to get the newly uploaded images.

Here's the the method I'm using to submit the images :

props: ['data'],
    data() {
        return {
            files: [],
            slug: this.data.slug,
            id: this.data.part.id,
            images : this.data.part.images
        }
    },
    methods: {

        submitFiles() {
            let formData = new FormData();
            for (let i = 0; i < this.files.length; i++) {
                let file = this.files[i];

                formData.append('files[' + i + ']', file);
            }

            axios.post('/dashboard/galleries/',
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
            ).then(function () {
                console.log('SUCCESS!!');
            })
                .catch(function () {
                    console.log('FAILURE!!');
                });
        }

Thanks to everyone for helping.

So your question is how to display the images after uploading successfully? — Amr Aly
– Amr Aly, Commented Apr 20, 2018 at 19:19
@AmrAly yes that's it. I want to refresh the images object after the upload is successful — Rahmani Seif El Moulouk
– Rahmani Seif El Moulouk, Commented Apr 20, 2018 at 19:27

tony19 · Accepted Answer · 2022-07-16 02:29:25Z

1

what you can do is after uploading your files is to return a response containing your images urls like so:

return response()->json(['images' => $images]);

and then in your .then block you can assign the response to your images piece of data like so:

axios.post('/dashboard/galleries/',
    formData,
    {
      headers: {
         'Content-Type': 'multipart/form-data'
      }
    }
    ).then(function (res) {
        this.images = res.data.images;
    })

update

since the data is going to change when we get the response we will need to use watch like so:

props: ...,
methods: ...,
watch: {
  images: function(val) {
    this.images = val;
  }
}

edited Jul 16, 2022 at 2:29

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 20, 2018 at 20:30

Amr Aly

3,9152 gold badges18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Amr Aly Over a year ago

so you have received the response with images?

Rahmani Seif El Moulouk Over a year ago

Yes I received the response with the images but the data property won't update

Rahmani Seif El Moulouk Over a year ago

@AmrAlu I've updated the question because I've forgotten to mention that at first I'm getting the images from the a property

Jacktur · Accepted Answer · 2018-04-20 19:22:37Z

0

use this https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL to display image from base64 string. There is a simple example.

answered Apr 20, 2018 at 19:22

Jacktur

663 bronze badges

Collectives™ on Stack Overflow

Updating object in vueJS

2 Answers 2

update

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

update

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related