ahoi's avatar
Level 5

Updating v-model on UiKit.upload function

Hi everybody,

I am using UIKit's uploading-element ( https://getuikit.com/docs/upload ).

Well - I would really love to update my v-model uploading after the upload has been finished:

<script>
    export default {

        data () {
            return {
                images: [],
                uploading: false
            }
        },
        mounted () {
            console.log ('Upload mounted.');

            axios
            .get ('/api/get')
            .then (response => (this.images = response.data));

            let tokenElement = document.head.querySelector ('meta[name="csrf-token"]');
            let token;

            if (tokenElement) {
                token = tokenElement.content;
            } else {
                console.error ('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
            }

            UIkit.upload ('.js-upload', {

                url: '/api/upload',
                multiple: false,

                beforeSend: function (environment) {
                },

                loadStart: function (e) {
                    this.uploading = true;
                },

                progress: function (e) {
                },

                loadEnd: function (e) {
                },

                completeAll: function () {


                           this.uploading = false;

                    axios
                    .get ('/api/get')
                    .then (response => (this.images = response.data));
                }

            });

        }
    }
</script>

Unfortunately this.uploading = true; does not change the v-model.

What can I do here?

0 likes
2 replies
Cronix's avatar
Cronix
Best Answer
Level 67

Isn't this in that context referencing the UIkit object and not the vue instance?

Maybe put let vueInstance = this; just before the UIkit stuff, and reference vueInstance.uploading from within the UIkit instance?

1 like
ahoi's avatar
Level 5

Yay, that works :-) Thank you!

Please or to participate in this conversation.