如何在JS中存储链接并通过html动态打开它？

Question

对不起，我对这一切完全陌生...

我正在尝试为自己的音乐创建音乐库。我将所有歌曲数据都存储在“歌曲”中，并且可以加载带有音频，图像，描述名称等的多个曲目。我无法解决的是如何为每个曲目加载一个按钮，以从中打开链接每个“歌曲”（license_url）-

这就是我在div中得到的。 许可证.....

下面是html，js文件。任何帮助将不胜感激！

    songs: [



      {
        id: 7,
        title: "Song 1",
        artist: "Apex Music PRS",
        description: "Description Description Description Description Description Description Description Description Description ",
        url:
          "./mp3/song1.mp3",
        cover_art_url:
          "https://www.bensound.com/bensound-img/november.jpg",
        license_url: "https://google.com"
      },

      {
        id: 1,
        title: "Song 2",
        artist: "Apex Music PRS",
        description: "Description Description Description Description Description Description Description Description Description ",
        url:
          "./mp3/song2.mp3",
        cover_art_url:
          "https://www.bensound.com/bensound-img/november.jpg",
        license_url: "https://gumroad.com"
      },
      {
        id: 3,
        title: "Song 3",
        artist: "Apex Music PRS",
        description: "Description Description Description Description Description Description Description Description Description ",
        url:
          "./mp3/song3.mp3",
        cover_art_url:
          "https://www.bensound.com/bensound-img/november.jpg",
        license_url: "https://facebook.com"
      },

      {
        id: 6,
        title: "song 4",
        artist: "Apex Music PRS",
        description: "Description Description Description Description Description Description Description Description Description ",
        url:
          "./mp3/song4.mp3",
        cover_art_url:
          "https://www.bensound.com/bensound-img/november.jpg",
        license_url: "https://twitter.com"
      },
      {
        id: 5,
        title: "song5",
        artist: "Apex Music PRS",
        description: "Description Description Description Description Description Description Description Description Description ",
        url:
          "./mp3/song5.mp3",
        cover_art_url:
          "https://www.bensound.com/bensound-img/november.jpg",
        license_url: "https://google.com"
      },
      {
        id: 2,
        title: "song 6",
        artist: "Apex Music PRS",
        description: "Description Description Description Description Description Description Description Description Description ",
        url:
          "./mp3/song6.mp3",
        cover_art_url:
          "https://www.bensound.com/bensound-img/november.jpg",
        license_url: "https://google.com"
      },

      {
        id: 4,
        title: "song 7",
        artist: "Apex Music PRS",
        description: "Description Description Description Description Description Description Description Description Description ",
        url:
          "./mp3/song7.mp3",
        cover_art_url:
          "https://www.bensound.com/bensound-img/november.jpg",
        license_url: "https://google.com"
      },


    ],

  <div id="app">

  <div class="container">
    <div class='row'>

      <template v-for='song in songs'>
         <div class="col-4 col-md-3 col-lg-2 song" >

           <div class='wrapper'>


            <div class="overlay-play text-center" v-if="isPlaying && (currentSong.id === song.id )" @click='pause'>
               <i class="icon ion-ios-pause"></i>
           </div>

            <div class="overlay-play text-center" @click='play(song)'v-else>

              <i class="icon ion-ios-play"></i>


           </div>

              <img :src="song.cover_art_url" alt="" class='img-fluid rounded'>


           </div>

           <button class="button_2" @click='window.location.href = "song.license_url"'>License</button>
           <h1 class='song-title mt-2'>{{song.title}}</h1>
           <p class='song-artiste' >{{song.artist}}</p>
           <p class="song-description" >{{song.description}}</p>


         </div>

       </template>

    </div>

  </div>

Answer 1

我认为使用普通的锚元素而不是按钮会更容易。 因此，只需将<table> <tr> <td style="width: 10%;"></td> <td style="width: 40%;"></td> <td style="width: 16%;"></td> <td style="width: 10%;"></td> <td style="width: 7%;"></td> <td style="width: 7%;"></td> <td style="width: 10%;"></td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td>E</td> <td>F</td> <td>G</td> <td>H</td> </tr> <tr> ... </tr> ... </table> 替换为button，它应该可以工作。

Answer 2

JSFiddel Demo

您只需要向您的<button>添加一个点击事件，并通过它传递您从song.license_url循环呈现的v-for即可，就像这样

<button class="button_2" @click='openLicense(song.license_url)'>License</button>

以及您的<script>

new Vue({
  el: "#app",
  data:{//your data is here
  },
  methods:{
   //Pass the songs license url value 
    openLicense(e){
      //will open the url into a new tab  
      window.open(e)
    }
  }
})