前提
Vue,js(Vue CLI)でSPAを作成しています。
API Aを叩いた後取得した情報を使って
API Bを叩く実装を行いました。
API Bを取得した時に表示する場所を特定のtdに表示したいのですが
vueで実装する方法がわかりません。
詳しい方ご教示いただければと思います。
実現したいこと
GETリクエストボタンを押すと下記になります。
No1のリンク作成ボタンを押すとその隣のダウンロードの項目に取得したデータを表示させたいのですが
そちらの方法がよくわかりません。
リンク作成を押した場合データとして下記が返ります。
https://hogehoge.com
該当のソースコード
vue.CLI
1<template> 2 <div class="margin"> 3 <h1 class="margin"> 4 hoge <span>{{ $store.state.user.username }}</span> 5 </h1> 6 </div> 7 <div class="margin"> 8 <button type="button" class="btn btn-warning" v-on:click="getData"> 9 GETリクエスト 10 </button> 11 <table class="table table-striped"> 12 <thead> 13 <tr> 14 <th scope="col">No</th> 15 <th scope="col">ファイル名</th> 16 <th scope="col">リンク作成</th> 17 <th scope="col">ダウンロード</th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr v-for="getitem in getitems" v-bind:key="getitem.id"> 22 <td>{{ getitem.id }}</td> 23 <td class="left">{{ getitem.body }}</td> 24 <td class="left"> 25 <button 26 type="button" 27 class="btn btn-warning" 28 v-bind:id="getitem.id" 29 v-on:click="postData(getitem.body)" 30 > 31 リンク作成 32 </button> 33 </td> 34 <td v-if="flag" v-bind:id=getitem.id>{{ postitems }}</td> 35 <td v-else></td> 36 </tr> 37 </tbody> 38 </table> 39 </div> 40</template> 41 42<script> 43import axios from "axios"; 44 45export default { 46 name: "DLsite.vue", 47 48 data: function () { 49 return { 50 title: "", 51 API_TOKEN: "", 52 bpi: null, 53 ary: [], 54 postitems: "", 55 flag: false, 56 getitems: [], 57 }; 58 }, 59 60 mounted: function () {}, 61 62 methods: { 63 postData: async function (filename) { 64 await axios({ 65 method: "post", // GET,POSTなど 66 url: "https://hogehoge.com/", // APIのURL 67 headers: { 68 "Content-Type": "application/json", 69 Authorization: 70 "Bearer " + 71 hoge.jwtToken, 72 }, 73 data: { 74 id: this.$store.state.user.username, 75 file: filename, 76 }, 77 }).then((response) => (this.postitems = response.data.body)); 78 console.log(this.postitems); 79 this.flag = true; 80 }, 81 82 getData: async function () { 83 await axios({ 84 method: "get", // GET,POSTなど 85 url: "https://ogehoge.com", // APIのURL 86 headers: { 87 "Content-Type": "application/json", 88 Authorization: 89 "Bearer " + 90 hoge.jwtToken, 91 }, 92 params: { 93 id: this.$store.state.user.username, 94 }, 95 }).then((response) => (this.getitems = response.data.body)); 96 console.log(this.getitems); 97 }, 98 }, 99}; 100</script>
あなたの回答
tips
プレビュー