1

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

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

PSLater 我还必须将所有图像放在另一个组件的单独数组中。

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

2 回答 2

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){
                const ret = response.data.records
                self.items = ret.map(e => e.name)
            }).catch(function(error){
                console.log(error)
            })
        },
    },
    mounted(){
        this.loadItems();
    },
})
于 2019-01-05T16:59:57.530 回答
0

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

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();
    },
})
于 2019-01-05T21:51:20.940 回答