Question

我正在尝试制作一个小的网页，并将Airtable用作数据库。我的基地包括几个领域。最重要的是我使用vue.js的“名称”和“ icon_png”，通过axios登录，并将所有数据库放在一个名为项目的数组中。当我想列出名称时，可以使用<... v-for =“ item in items”>在html端进行操作，但这只是呈现。

现在我需要通过“ props”将所有名称作为一个变量传递给子组件。我如何处理数组并将名称从数组“项目”发送到数组，例如“名字”？

P.S。稍后，我还必须将所有图像放在另一个组件的单独数组中。

这是我的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();
    },
})

Answer 1

您可以映射您的记录：

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();
    },
})

Answer 2

我通过直接在新数组中重写名称来做到这一点。谢谢您的帮助。

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();
    },
})

如何在一个数组中获取记录的所有名称？

2 个答案: