javascript - Vue.js - 从 axios 返回数组

Question

我正在尝试从 axios 调用中获取数组:

这样我就可以访问组件的数据。我知道我可以使用类似

  return {
    a: []
  }
}

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

但问题是，我对每个图像都有一个数组，并且图像的数量是动态的。所以我只想返回一个数组

是否有机会如我所愿？ 如果有办法动态地生成所有数组，我可以忍受在 data() 中生成所有数组。或者 axios 可以返回吗？

这里我的代码不起作用:

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

Answer 1

最好的方法是在 mounted hook 中使用 axios 返回数据，或者在触发某个事件后调用方法:

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

你的方法应该是这样的:

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