59085


axiosで外部からjsonを取ってきてv-
forのループで表示させる、というよくあるサンプルにあるようなことなのですが、axiosでgetする際のURLをある程度変化させるようなことは可能なのでしょうか。

以下のようなHTML(PHP)と

[code]

    (/hoge.php?id=5)
    <div id="hogeapp">
        <div v-for="program in progams">
          {{program.name}}
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="./main.js"></script>
    
[/code]

以下のようなjsで作ったvueのページがあるとして、

[code]

    (main.js)
    var hogeapp = new Vue({
        el: '#hogeapp',
        data:{
            programs: [],
            id:'',
        },
        mounted () {
            axios
                .get("json-programs.php?id=" + id)
                .then(response => {
                    this.programs = response.data;
                })
        },
    })
    
[/code]

やりたいことは、HTMLのクエリストリングで指定されたIDのデータのみのJSONを取得できるよう、axiosのgetの段階でクエリストリングでidを指定したい(この場合
json-programs.php?id=5 からデータを取得したい)のです。

このソースを実行すると、初期状態ではmain.jsのdata:のIDは空なので、mountedされた段階でaxios.getに渡すURLが完成していません。

何らかの形で、mountedの前にHTMLのクエリストリングのID(5)をvueのアプリの変数idに渡せれば良いかと思ったのですが、その方法がわかりません。

一般的には全データを取得した上で、computedの中でfilterするのでしょうが、データの量が多いため、取得するデータは最低限にしたいという事情があります。  
また、テキストボックスとidを双方向バインディングするなどが考えられましたが、htmlのクエリストリングのidをそのまま使いたいので、できれば余計なテキストボックスは画面に出したくないところです。

どういった方法が考えられるでしょうか。  
あるいは、こういう場合はコンポーネントにしてしまうしかないのでしょうか?


CC BY-SA 4.0
2019-09-13T17:32:07.890
59050
2021-04-04T00:51:17.743
2021-04-04T00:51:17.743
32986
8145
question
vue.js axios
vue.js+axiosで、データの取得先のURLを動的に切り替えたい


コメント欄にて解決したようなので転載します。

>
> ID(この場合は5)という値を（Vue.jsとは関係なく）どうやってJavaScriptで取得するかによって実装方法が変わりそうです。mountedの時点で5というIDは既に決定されているでしょうか？もし決定されていてJavaScriptから取得できるのであれば（例えばそのページ自身のURLのクエリストリングに含まれているなど）、Vue.jsとは関係なく、それ（前述の例ならlocation.search）を使えばいいと思います。

この回答でよければ[回答の承認](https://ja.stackoverflow.com/help/someone-answers)をしてください。


CC BY-SA 4.0
2019-09-15T17:59:16.530
59085
2019-09-15T17:59:16.530
4388
59050
answer