spy30/resources/assets/js/components/Scorecard.vue

<template>
  <div class="panel panel-default scorecard" v-if="show">
    <div class="panel-heading">
      <div class="team">
          <span class="team-icon" :style="'background-color: #'+tweet.team_color"></span> 
          <span class="team-name">{{ tweet.team_name }}</span>
      </div>
      <button type="button" class="close" v-on:click="dismiss"><span>&times;</span></button>      
    </div>

    <div class="panel-body">

      <div class="row">
        <div class="col-md-8">

          <div class="profile">
              <img :src="tweet.player_photo" :style="'border-color: #'+tweet.team_color"> 
              <span><a :href="'https://twitter.com/'+tweet.player_username">@{{ tweet.player_username }}</a></span>
          </div>

          <div class="tweet">
            <div class="text">{{ tweet.text }}</div>
            <div v-if="tweet.photos">
              <div :class="'multi-photo photos-'+tweet.photos.length" v-if="tweet.photos">
                <div v-for="img in tweet.photos" class="photo" :style="'background-image:url('+img+')'" :data-featherlight="img">
                  <img :src="img">
                </div>
              </div>
              <div class="multi-photo-clear"></div>
            </div>
          </div>


        </div>
        <div class="col-md-4">

          <div>{{ tweet.mission }}</div>





        </div>
      </div>

    </div>
  </div>
</template>
<script>
module.exports = {
  props: ['show', 'tweet'],
  data () {
    return {
    }
  },
  methods: {
    dismiss() {
      this.$emit('dismiss')
    }
  },
  watch: {
    // https://vuejs.org/v2/guide/computed.html#Watchers
    show: function(val) {
      if(val) {
        // https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue
        Vue.nextTick(function() {
          $(".multi-photo .photo").featherlight();
        });
      }
    }
  },
  created() {
  }
}
</script>