[英]Vue.js - Return array from axios
I am trying to get an array out of an axios call:我正在尝试从axios调用中获取一个数组:
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.
如果有一种动态的方法,我可以忍受在 data() 中生成所有数组。 Or can axios return it?
或者axios可以返回吗?
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>
The best way is to return the data using axios in mounted hook or by calling a method after firing some event :最好的方法是在挂载钩子中使用 axios 或在触发某个事件后调用方法返回数据:
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];
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.