Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
@twtjudy1128
Revisions
Report this question
Subscribe question
Help us understand the problem. What are the problem?
Q&A
Closed

URLの中に変数を代入する方法を教えてください【Vue.js】

解決したいこと

Vue.jsでWebアプリを作っています。
YoutubePlayerを埋め込んでいて、最新のvideoIdを引っ張ってきて再生したいのですが、
URLにどうすれば変数を代入できるのかというところで詰まってしまいました。
解決方法を教えて下さい。

https://www.youtube.com/embed/(videoID)

▲具体的には、youtubeのURLがこのような構成になっているので
ここの(videoID)の部分に自作のWebAPIからvideoIDを引っ張ってきたいということです。

発生している問題・エラー

Image from Gyazo

該当するソースコード

        <div style="text-align: center;">    
            <iframe 
             width="240" height="180" 
             v-bind:src="video"
             frameborder="0" allow="accelerometer; autoplay; 
             encrypted-media; gyroscope; picture-in-picture" 
             allowfullscreen></iframe>
        </div>
      </div>
    </div>
    <script> 
        const app = new Vue({
          el: '#app',
          data: {
              video:''
          },
          mounted:function() {
            axios
            .get('自作したWebAPIのURL')
            .then(response => console.log(response.data))
            //.catch(response => console.log(response))
             this.video="https://www.youtube.com/embed/"+response.data
          },  

        })
    </script>

自分で試したこと

APIには問題はありません。
最初、consoleに引っ張ってきたvideoIdすら出てこなかったのですが、
このコードにたどり着いてから、consoleには出てくるようにはなりました。

html部分を{{response.data}}にしてみたら、もっとエラーが出たので
一番エラーが出てないこのコードに戻ってきた流れです・・・。

よろしくお願いします。

0
2
Answer

こんにちは。

まず、ログに関してです。

https___i.gyazo.com_5546bdddc8c55758cdc5480570a94638.png

参照エラーが出ていますので、responseという変数が該当スコープ内で定義されていないと推測することができます。
つまり、

mounted:function() {
    axios
    .get('自作したWebAPIのURL')

    .then(response => console.log(response.data))
    //.catch(response => console.log(response))

    // このスコープでは'response'はスコープ外なので参照できないということです。
    this.video="https://www.youtube.com/embed/"+response.data
},  

正しくは、

mounted:function() {
    axios
    .get('自作したWebAPIのURL')

    .then(response => {
        //'resnponse'変数はこのラムダ(無名関数)でのみ有効です。
        console.log(response.data)
        this.video="https://www.youtube.com/embed/"+response.data

        //文字列リテラルというものを使う事もできます。
        this.video=`https://www.youtube.com/embed/${response.data}`
    })
    //.catch(response => console.log(response))

    // このスコープでは'response'はスコープ外なので参照できないということです。
    //this.video="https://www.youtube.com/embed/"+response.data
},  

こういうことだと思いますが、いかがでしょうか?
手元に実証できる環境がないので、是非試してみてください。

3
いつもありがとうございます!
あ~~~惜しいとこまでいけてたんですね、悔しい…!
でも説明とても分かりやすかったです、無事動きました。ありがとうございます><

すぐご回答いただけて本当に助かりました。
動いたようで何よりです!

文字列リテラル(正確にはテンプレートリテラルと呼びます)は便利なものですので、一度目を通されると今後凄く役に立つと思います :)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals
何から何までありがとうございます!涙
View the remaining 2 comments.

横やりすいません。

Vue.jsは触ったことないのですが、@kkent030315さんの回答にあるスコープ範囲とコードの.thenでのチェインをみる感じ、スコープもそうですが非同期処理への理解も強化していたほうがよさそうだなと思いました◎
惜しいんですが、溝は少し深いかなと思いました。私も初めのころは理解すべき箇所がわからずによく同じことで躓いていたので、、、余計な老婆心がうずいてしまいました。

ネトストしていたらちょっと気になってしまったのでコメントしました。

2
@mikiotec さん!コメントありがとうございます!とても嬉しいです!

惜しいんですが、溝は少し深い・・・

すごく刺さりました!わずかなことだけど、理解してるかしてないかで大きく変わるポイントですよね。

まだ完全に理解できていないので、アドバイス参考にさせていただきます♪

私のコード色々ぐちゃぐちゃなので(笑)
また気になったらいつでもコメントいただけると嬉しいです!

ありがとうございました!
Help us understand the problem. What are the problem?
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login