@twtjudy1128
Revisions
Report this question
Subscribe question
Help us understand the problem. What is going on with this question?
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
1
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.
Help us understand the problem. What is going on with this answer?
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした