VueでJSONデータをdataのオブジェクトに格納しても反映されない

APIから取得したJSONデータをbooksという配列に格納しているのですが、格納後にコンソールで出力してもundifinedとなってしまいます。
なぜ正しく出力されないのか、解決法を教えていただきたいです。よろしくお願いします。

Javascript
1data(){
2        return {
3            keyword: 'サッカー',
4            totalItems: null,
5            index: 0,
6            books: [],
7            posts: [],
8            searching: false,
9            word: null,
10            currentPage: 1,            
11        }
12    },
13methods: {
14        //検索ボタンで書籍を検索
15        ...mapActions(['addResult']),
16        onclick: function(){                
17            this.$http('https://www.googleapis.com/books/v1/volumes?q='+this.keyword+'&maxResults=10'+'&startIndex='+this.index)
18                //JSONデータとして取得
19                .then((response)=>{
20                    return response.json()
21                })
22                //JSONの内容をbooksに詰め替え
23                .then((data)=>{
24                    this.totalItems = data.totalItems                    
25                    this.books=[]
26                    for(let b of data.items){
27                        let authors = b.volumeInfo.authors
28                        let price = b.saleInfo.listPrice
29                        let publisher = b.volumeInfo.publisher
30                        let published = b.volumeInfo.publishedDate
31                        let img = b.volumeInfo.imageLinks
32
33                        this.books.push({
34                            id: b.id,
35                            title: b.volumeInfo.title,
36                            author: authors ? authors.join(',') : '',
37                            price: price ? price.amount.toLocaleString() : '-',
38                            publisher: publisher ? b.volumeInfo.publisher : '',
39                            published: published ? b.volumeInfo.publishedDate : '',
40                            image: img ? img.smallThumbnail : ''
41                        })
42                    }
43                })
44            console.log('詰め替え終了')            
45            console.log(this.books)
46            this.addResult(this.books)
47        },

行動規範の内容に同意します

回答2件

自分の環境で確認したところ、問題なくbooksにデータを格納することが出来ました。
多少書き方は違いますが、やっていることは同じかと思います。

以下が、サンプルコードです。

vue
1<script>
2    import axios from 'axios'
3    export default {
4        data: () => ({
5        	books: [],
6        }),
7        methods: {
8            changeToggleDrawer (value) {
9                this.drawer = value
10            },
11            getBook () {
12                axios({
13                	url: 'https://www.googleapis.com/books/v1/volumes?q=Vue&maxResults=10',
14                	method: 'GET',
15                })
16                .then(data => {
17                    for (const b of data.data.items) {
18                        const authors = b.volumeInfo.authors
19                        const price = b.saleInfo.listPrice
20                        const publisher = b.volumeInfo.publisher
21                        const published = b.volumeInfo.publishedDate
22                        const img = b.volumeInfo.imageLinks
23
24                        this.books.push({
25                            id: b.id,
26                            title: b.volumeInfo.title,
27                            author: authors ? authors.join(',') : '',
28                            price: price ? price.amount.toLocaleString() : '-',
29                            publisher: publisher ? b.volumeInfo.publisher : '',
30                            published: published ? b.volumeInfo.publishedDate : '',
31                            image: img ? img.smallThumbnail : ''
32                        })
33                    }
34                	console.log(this.books)
35                })
36            }
37        },
38    }
39</script>

念のため確認ですが、正しくAPIからデータは取得出来ていますか？
また、dataの部分に正しくbooksは定義されていますか？

投稿2020/10/08 02:23

stakizawa

総合スコア117

自己解決

console.logの位置を修正したことで解決しました。

Javascript
1methods: {
2        //検索ボタンで書籍を検索
3        ...mapActions(['addResult']),
4        onclick: function(){
5            console.log(this.currentPage)
6            if(this.keyword != this.word) {
7                this.word = this.keyword
8                this.currentPage = 1
9                this.index = 0
10            }            
11            this.$http('https://www.googleapis.com/books/v1/volumes?q='+this.keyword+'&maxResults=10'+'&startIndex='+this.index)
12                //JSONデータとして取得
13                .then((response)=>{
14                    return response.json()
15                })
16                //JSONの内容をbooksに詰め替え
17                .then((data)=>{
18                    this.totalItems = data.totalItems                    
19                    this.books=[]
20                    for(let b of data.items){
21                        let authors = b.volumeInfo.authors
22                        let price = b.saleInfo.listPrice
23                        let publisher = b.volumeInfo.publisher
24                        let published = b.volumeInfo.publishedDate
25                        let img = b.volumeInfo.imageLinks
26
27                        console.log('格納')
28                        this.books.push({
29                            id: b.id,
30                            title: b.volumeInfo.title,
31                            author: authors ? authors.join(',') : '',
32                            price: price ? price.amount.toLocaleString() : '-',
33                            publisher: publisher ? b.volumeInfo.publisher : '',
34                            published: published ? b.volumeInfo.publishedDate : '',
35                            image: img ? img.smallThumbnail : ''
36                        })
37                    }
38                    //この位置に修正
39                    console.log(this.books)
40                    this.addResult(this.books)
41                })
42            console.log('詰め替え終了')                     
43        },