Vue.js - Return array from axios

Question

I am trying to get an array out of an axios call:

so that I can access the data for a component. I'm aware that i could use some thing like

  return {
    a: []
  }
}

getTags(index) {
  axios.get('http://localhost:8080/user/tag?imageIndex=' + index)
    .then(response => {
      this.a = response.data
     })
},

But the Problem is, that i have for each image one array and the number of images are dynamic. So i would like to just give a array back

Is there a opportunity to do as I want? I could live with generating all the arrays in data() if there is a way to do that dynamically. Or can axios return it?

Here my Code that does not work:

<template>
    <div id="SingleFile">
        <button
                id="refreshbtn"
                class="btn btn-primary btn-margin"
                @click="updateFileList">
            refresh
        </button>

        <gallery :images="images" :index="index" @close="index = null"></gallery>
        <div
                :key="imageIndex"
                :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
                @click="index = imageIndex"
                class="image"
                v-for="(image, imageIndex) in images"

        >
            <div>
            <vue-tags-input
                    v-model="tag"
                    :tags="getTags(imageIndex)"
                    @tags-changed="newTags => tags = newTags"
            />
            </div>
        </div>
    <div class="upload">
        <upload-image url="http://localhost:8080/user" name="files" max_files="100"></upload-image>
    </div>
    </div>
</template>

<script>
    import VueGallery from 'vue-gallery';
    import axios from 'axios';
    import auth from './../service/AuthService'
    import router from './../router'
    import UploadImage from 'vue-upload-image';
    import VueTagsInput from '@johmun/vue-tags-input';

    export default {
    components: {
        'gallery': VueGallery,
        'upload-image': UploadImage,
        VueTagsInput
    },

    data() {
        return {
            images: [],
            index: null,
            tag: '',
        };
    },

    created() {
        this.checkAuth()
    },

    methods: {
        checkAuth() {
            if (auth.isAuthenticated()) {
                this.updateFileList()
            } else {
                router.replace('/')
            }
        },

        updateFileList() {
            axios.get('http://localhost:8080/user')
             .then(response => {
                 this.images = response.data
             })
        },

        getTags(index) {
            return axios.get('http://localhost:8080/user/tag?imageIndex=' + index)
                .then(response => {
                    return response.data
                })
        },
    },
};
</script>

Boussadjra Brahim · Accepted Answer · 2019-01-13 18:16:21Z

1

The best way is to return the data using axios in mounted hook or by calling a method after firing some event :

 mounted(){
    //return all your images using valid url
     axios.get('http://localhost:8080/user/tag')
       .then(response => {
          this.a = response.data
       })
   }

and your method should be like as :

methods:{
  getTags(i){
   return this.a[i];
   }
}

answered Jan 13, 2019 at 18:16

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

1 Comment

Robin Over a year ago

I just give back a List<String>[] now from the backend and now i can access it like described. Thanks a Lot!

Collectives™ on Stack Overflow

Vue.js - Return array from axios

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related