yNQWGP

index.jade

div#app.container
  .panel.panel-default
    .panel-heading
      h3.panel-title YouTube API
    .panel-body
      youtube(v-repeat="list")
    .panel-footer
      button.btn.btn-default(type="button", v-on="click: check") add
 
 
 template#youtubeComponent
   div
     div(v-el="target")

script.js

Vue.component 'youtube',
  props: ['videoId']
  data: ->
    age: 40
  template: '#youtubeComponent'
  ready: ->
    if YT? and YT.Player?
      @createPlayer()
    else
      old = window.onYouTubeIframeAPIReady or () -> return
      window.onYouTubeIframeAPIReady = =>
        old()
        @createPlayer()
        return
    return
  methods:
    createPlayer: ->
      @player = new YT.Player @$$.target,
        height: 390
        width: 640
        videoId: @videoId
        events:
          onReady: @onPlayerReady
          onStateChange: @onPlayerStateChange
       return

     onPlayerReady: ->
       @$dispatch 'youtube:player:ready', @videoId
       return

     onPlayerStateChange: (event) ->
       return

id = "M7lc1UVf-VE"

app = new Vue
  el: '#app'
  data:
    apple: 30
    list: [
      videoId: "M7lc1UVf-VE"
    ]
  methods:
    check: ->
      @list.push videoId: id
      return
  events:
    'youtube:player:ready': (id) ->
      @apple += id
      return

scripts

<script src="https://www.youtube.com/iframe_api"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.8/vue.min.js"></script>

style.css

#app {
  margin-top: 40px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

yNQWGP.markdown

yNQWGP

A Pen by Kaoru Hagihara on CodePen.

License.