Как получить все имена записей в одном массиве? - PullRequest
Новая
       5

Как получить все имена записей в одном массиве?

0 голосов
/ 05 января 2019

Я пытаюсь создать небольшую веб-страницу и использовать Airtable в качестве базы данных. Моя база включает в себя несколько полей. Наиболее важными являются "name" и "icon_png". Я использую vue.js, авторизируюсь через axios и получаю всю базу данных в одном массиве с именованными элементами. Когда я хочу перечислить имена, я могу сделать это на стороне html, используя <... v-for = "item in items">, но это только рендеринг.

Теперь мне нужно передать все имена как одну переменную дочернему компоненту через "props". Как я могу манипулировать массивами и отправлять имена из «элементов» массива, например, в массив. "имена"?

P.S.Later Мне также нужно поместить все изображения в отдельный массив для другого компонента.

Вот мой код для JS. И я понятия не имею, как поставить имена в «имена» 

const app = new Vue({
    el: '#wrapper',
    data: {
        items: [],
        names:[],
    },
    methods: {
        loadItems: function(){                        
            var self = this
            var app_id = "MY_ID";
            var app_key = "MY_KEY";
            this.items = []
            axios.get("https://api.airtable.com/v0/" + app_id + "/MY_BASE/?view=webpage",
                { 
                    headers: { Authorization: "Bearer "+app_key } 
                }
            ).then(function(response){
                self.items = response.data.records
            }).catch(function(error){
                console.log(error)
            })
        },
    },
    mounted(){
        this.loadItems();
    },
})

Ответы [ 2 ]

0 голосов
/ 06 января 2019

Я сделал это, переписав имена в новом массиве. Спасибо за вашу помощь. 

const app = new Vue({
    el: '#wrapper',
    data: {
        items: [],
        names:[],
    },
    methods: {
        loadItems: function(){                        
            var self = this
            var app_id = "MY_ID";
            var app_key = "MY_KEY";
            this.items = []
            axios.get("https://api.airtable.com/v0/" + app_id + "/MY_BASE/?view=webpage",
                { 
                    headers: { Authorization: "Bearer "+app_key } 
                }
            ).then(function(response){
                self.items = response.data.records
                for (i in Object.keys(self.items)){
                    self.names[i]=self.items[i].fields.Name
                }
            }).catch(function(error){
                console.log(error)
            })
        },
    },
    mounted(){
        this.loadItems();
    },
})
0 голосов
/ 05 января 2019

Вы можете отобразить свои записи: 

const app = new Vue({
    el: '#wrapper',
    data: {
        items: [],
        names:[],
    },
    methods: {
        loadItems: function(){                        
            var self = this
            var app_id = "MY_ID";
            var app_key = "MY_KEY";
            this.items = []
            axios.get("https://api.airtable.com/v0/" + app_id + "/MY_BASE/?view=webpage",
                { 
                    headers: { Authorization: "Bearer "+app_key } 
                }
            ).then(function(response){
                const ret = response.data.records
                self.items = ret.map(e => e.name)
            }).catch(function(error){
                console.log(error)
            })
        },
    },
    mounted(){
        this.loadItems();
    },
})
...