質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

361閲覧

Vue.jsで特定のtdに表示させる方法

Perfume-T-Anata

総合スコア25

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/07/26 08:40

前提

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問