0

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

以下のようなHTML(PHP)と

(/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>

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

(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;
            })
    },
})

やりたいことは、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をそのまま使いたいので、できれば余計なテキストボックスは画面に出したくないところです。

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

2
  • ID(この場合は5)という値を(Vue.jsとは関係なく)どうやってJavaScriptで取得するかによって実装方法が変わりそうです。mountedの時点で5というIDは既に決定されているでしょうか?もし決定されていてJavaScriptから取得できるのであれば(例えばそのページ自身のURLのクエリストリングに含まれているなど)、Vue.jsとは関係なく、それ(前述の例ならlocation.search)を使えばいいと思います。
    – urin
    2019年9月14日 21:10
  • コメントありがとうございます。 ソースサンプル頭の通り、クエリストリングでidを指定する前提になります。 アドバイスのように、location.searchで取得して出す事ができました。 ありがとうございました。 (ただ、main.jsの中からブラウザのオブジェクトにアクセスするのはなんとなく気持ち悪く感じるので、もうちょっと良い方法がないものかなぁ、と思っています。) 2019年9月15日 14:47

1 件の回答 1

0

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

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

この回答でよければ回答の承認をしてください。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。