composition apiについて勉強をしております。
現在バックエンドはDjango、フロントエンドはVue.jsでアプリを開発しようとしております。
Djangoで作成したエンドポイントをGETでリクエストを送ると、下記のようなjson形式のデータを受け取れるようになっております。
json
1[ 2 { 3 "id": 2, 4 "shop_name": "店舗名 2", 5 "total_sales": 549560, 6 "total_customer": 6750, 7 "created_at": "2021-04-04T08:18:36.562440Z", 8 "updated_at": "2021-04-04T08:18:36.562466Z" 9 }, 10 { 11 "id": 2, 12 "shop_name": "店舗名 3", 13 "total_sales": 549560, 14 "total_customer": 6750, 15 "created_at": "2021-04-04T08:18:36.562440Z", 16 "updated_at": "2021-04-04T08:18:36.562466Z" 17 } 18]
jsonのデータを受け取り, Templateで使用するためにcomposition apiでtemplateにデータを渡したいのですがうまくいきません。
従来のVue.js2 options-apiの書き方ではうまくいっております。
html
1<template> 2 <div id="app"> 3 <table class="table"> 4 <thead> 5 <th>shop_name</th> 6 <th>total_sales</th> 7 <th>total_customer</th> 8 </thead> 9 <tbody> 10 <tr v-for="shopInfo in shopInfos" :key="shopInfo.id"> 11 <td>{{shopInfo.shop_name}}</td> 12 <td>{{shopInfo.total_sales}}</td> 13 <td>{{shopInfo.total_customer}}</td> 14 </tr> 15 </tbody> 16 </table> 17 </div> 18</template>
うまく表示されるoptions-apiでの書き方は下記になります。
javascript
1export default{ 2 name: "App", 3 data(){ 4 return{ 5 shopInfos: [] 6 } 7 }, 8 async created(){ 9 var response = await fetch("エンドポイント"); 10 this.shopInfos = await response.json(); 11 } 12}
上記のoptions-apiをcomposition-apiで書き換えたいです。
自分なりにコードを書いてみた結果が以下になります。
javascript
1export default defineComponent({ 2 name: 'App', 3 setup() { 4 const shopInfos = axios 5 .get("http://127.0.0.1:8000/api/posregister/") 6 .then((response) => {return response.data}); 7 console.log(shopInfos) 8 return { 9 shopInfos, 10 } 11 } 12});
ターミナル上で表示されているエラー
text
198% after emitting CopyPlugin 2 3 WARNING Compiled with 1 warning 12:12:34 4 5 warning in ./node_modules/@vue/composition-api/dist/vue-composition-api.esm.js 6 7"export 'default' (imported as 'Vue') was not found in 'vue'
Google chrome developper-tool上に表示されているエラー
text
1runtime-core.esm-bundler.js?5c40:540 Error: [vue-composition-api] No vue dependency found. 2 at assert (vue-composition-api.esm.js?a6f4:37) 3 at getRegisteredVueOrDefault (vue-composition-api.esm.js?a6f4:115) 4 at observe (vue-composition-api.esm.js?a6f4:562) 5 at reactive (vue-composition-api.esm.js?a6f4:674) 6 at ref (vue-composition-api.esm.js?a6f4:386) 7 at setup (App.vue?3dfd:28) 8 at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154) 9 at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6542) 10 at setupComponent (runtime-core.esm-bundler.js?5c40:6503) 11 at mountComponent (runtime-core.esm-bundler.js?5c40:4206)
お忙しい中大変恐縮ではございますが、問題解決のためにご協力いただけると幸いでございます。
あなたの回答
tips
プレビュー