【Vue.js】楽天APIで人気商品の情報を取得する
楽天のAPIとVue.3を使って人気商品の情報を取得しました。
src>App.vue
<template>
<div class="m-5">
<Item
v-for="shohin in shohinList"
v-bind:ItemObj="shohin"
v-bind:key="shohin.Item.rank"
/>
</div>
</template>
<script>
import Item from "./components/Item.vue";
export default {
name: "App",
components: {
Item,
},
data() {
return {
shohinList: ,
};
},
async mounted() {
const url =
const response = await fetch(url);
this.shohinList = data.Items.slice(0,5);
console.log(data);
},
};
</script>
async…awaitを含む関数につける
await…非同期に動かしたい処理につける
fetch…非同期関数
src>components>Item.vue
<template>
<div>
<h2>第{{ item_rank }}位</h2>
<h3>{{ item_name }}</h3>
<img v-bind:src="item_img" />
<h3>価格：{{ item_price }}円</h3>
<a v-bind:href="item_url">商品の詳細をみる</a>
</div>
</template>
<script>
export default {
name: "Item",
props: {
ItemObj: Object,
},
data() {
return {
item_rank: "",
item_name: "",
item_img: "",
item_price: "",
item_url: "",
shop_url: "",
};
},
mounted() {
const item = this.ItemObj.Item;
this.item_rank = item.rank;
this.item_name = item.itemName;
this.item_img = item.mediumImageUrls[0].imageUrl;
this.item_price = Number(item.itemPrice).toLocaleString();
this.item_url = item.itemUrl;
this.shop_url = item.shopUrl;
},
};
</script>
こんな感じになります。
困ったところ
・App.vueからItem.vueに、複雑な配列のデータをどう受け渡すのか悩んだ。
→App.vueに以下のコードを書いて、コンソールにて配列の中身とにらめっこ。
console.log(data);
扱いたい商品情報の入った配列だけ取り出したいので、
それを入れるための配列を定義。
data() {
return {
shohinList: ,
};
},
data.Itemsで連想配列のキーItemsに対応する配列だけ取り出して、
先ほどつくった配列に格納する。
this.shohinList = data.Items;
・商品の画像やリンクを、こんな感じで書いてみたがうまく動かなかった。
<img src="item_img" />
→vue.jsで属性に対してデータバインディングを行うためには、
v-bindが必要になるためv-bindを追加。
これで動くようになりました！
<img v-bind:src="item_img" />
