以下の機能をVue.jsで実装しようとしています。
①セレクトボックス1にAPI1から取得したBigQueryのテーブル名を表示し、選択する
②①で選択したテーブル名の文字列をAPI2の引数に渡して、テーブル内のカラムリストを取得して表示する
そこで、セレクトタグで選択した値($selectedTable)をAPI2のパラメータとしてメソッドに送る方法を教えて頂きたいです。
Vue.js初心者で調べながらなので、かなり記述方法に怪しいところはあるのですが、その他ご指摘もあれば学習のためにもご教授頂きたいです。よろしくお願いします。
*APIはPythonのFlaskで作成、ホストはGAE
API1動作確認済み
API2パラメータを固定の文字列を付与することで動作確認済み
<template> <div> <select v-model="table_list_selected" v-on:change="fetchTags($selectedTable)"> <option v-for="table in tables" :key='table.id'>{{ table }}</option> </select> <select v-model="tag_list_selected"> <option v-for="tag in tags" :key='tag.id'>{{ tag }}</option> </select> </div> </template> <script> import axios from 'axios' export default { data () { return { tables: '', table_list_selected: '', tags: '', tag_list_selected: '' } }, created () { axios.get('API1').then(response => { this.tables = response.data }) }, methods: { fetchtags: function (selectedTable) { axios.get('API2', { params: { tableName: selectedTable } }).then(response => { this.tags = response.data }) } } </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/23 04:48