hue属性の変数vuejs

Question

私は要素のsrcをjs変数に設定しようとしています。私はいくつかの方法を試しましたが、それを働かせることはできません。ここで

<source src="{{ this.show.podcastUrl }}" type="audio/mpeg"> 

一つの方法がある私も、私が間違って何をやっている

<source v-bind:src="{{ this.show.podcastUrl }}" type="audio/mpeg"> 

そして

<source :src="{{ this.show.podcastUrl }}" type="audio/mpeg"> 

を試してみましたか？ここに私のコンポーネントはありますか？

<template> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      {{ this.show.name }} 
      <div class="pull-right"> 
       {{ this.show.number }} 
      </div> 
     </div> 
     <div class="panel-body"> 
      <ul> 
       <li>Air Date: </li> 
       <li> 
        <audio controls> 
         <source v-bind:src="{{ this.show.podcastUrl }}" type="audio/mpeg"> 
        </audio> 
       </li> 
      </ul> 
     </div> 
    </div> 
</template> 


<script> 
    export default { 
     mounted() { 
      console.log(this.show); 
     }, 

     props: { 
      show: { 
       type: Object, 
       required: true 
      } 
     } 
    } 
</script> 

Answer 1

これは、あなたがv-bind指令にmustachesを使用しているからです。これは許可されていません。

口ひげVueJSに{{}}がテンプレートに関連して、v-bindはJSに渡される - テンプレートエンジンの一部ように口ひげをv-bind指令に許可されていません。

これは正しい方法でなければなりません。また

<source :src="show.podcastUrl" type="audio/mpeg"> 

thisはここでは必要ありません。