Ву.js-возвращает массив из axios

Ву.js-возвращает массив из axios

13.01.2019 09:10:54 Просмотров 40 Источник

Я пытаюсь получить массив из вызова axios:

так что я могу получить доступ к данным для компонента. Я знаю, что я мог бы использовать некоторые вещи, как

  return {
    a: []
  }
}

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

Но проблема в том, что у меня есть для каждого изображения один массив и количество изображений являются динамическими. Так что я хотел бы просто дать массив обратно

Есть ли возможность сделать так, как я хочу? Я мог бы жить с созданием всех массивов в data (), если есть способ сделать это динамически. Или Аксиос может вернуть его?

Вот мой код, который не работает:

<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>
У вопроса есть решение - Посмотреть?

Ответы - Ву.js-возвращает массив из axios / Vue.js - Return array from axios

Является ответом!
Boussadjra Brahim

13.01.2019 09:16:21

Лучший способ-вернуть данные с помощью 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];
   }
}
https://stackoverflow.com/questions/54171765/vue-js-return-array-from-axios/54171808#comment95172808_54171808
Я просто возвращаю список < String>[] теперь из бэкэнда, и теперь я могу получить к нему доступ, как описано. Большое спасибо!
Закрыть X