Javascript Vue.js-从axios返回数组

我正在尝试从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>

刷新
从“vue画廊”导入VueGallery；
从“axios”导入axios；
从“/../service/AuthService”导入身份验证
从“/../router”导入路由器
从“vue上载图像”导入上载图像；
从“@johmun/vue标记输入”导入VueTagsInput；
导出默认值{
组成部分：{
“画廊”：维加莱里，
“上载图像”：上载图像，
VueTagsInput
},
数据（）{
返回{
图像：[]，
索引：null，
标记：“”，
};
},
创建（）{
this.checkAuth（）
},
方法：{
checkAuth（）{
如果（auth.isAuthenticated（））{
this.updateFileList（）
}否则{
路由器。替换（“/”）
}
},
updateFileList（）{
axios.get（）http://localhost:8080/user')
。然后（响应=>{
this.images=response.data
})
},
getTags（索引）{
返回axios.get（'http://localhost:8080/user/tag?imageIndex=“+索引）
。然后（响应=>{
返回响应.data
})
},
},
};

最好的方法是使用挂载钩子中的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];
   }
}

我现在只从后端返回一个列表[]，现在我可以像前面描述的那样访问它。谢谢！