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

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-8 col-md-8 panel scorecard">

        <div class="panel-body">
          <div v-if="previewTweet">
            <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 class="tweet-actions">
              <button type="button" class="btn btn-success" v-on:click="importTweet">Import</button>
            </div>

          </div>
          <div v-else>
            <div v-if="error">
              <div class="alert alert-danger" role="alert">{{ error }}</div>
            </div>
            <form v-on:submit.prevent>
              <div class="form-group">
                <label for="">Tweet URL</label>
                <input type="url" class="form-control" placeholder="https://twitter.com/..." v-on:keyup.enter="loadTweet">
              </div>
            </form>
          </div>
        </div>

      </div>
    </div>
  </div>


</template>
<script>
module.exports = {
  props: [],
  data () {
    return {
      error: false,
      tweet: null,
      tweetID: null,
      previewTweet: false
    }
  },
  methods: {
    loadTweet(e) {
      var tweetURL = $(e.target).val();
      $.post("/import/preview", {
        url: tweetURL
      }, function(response){
        if(response.error) {
          this.tweet = null;
          this.tweetID = null,
          this.previewTweet = false;
          this.error = response.error;
        } else {
          console.log(response);
          this.tweet = response;
          this.tweetID = response.twitter_id;
          this.previewTweet = true;
          this.error = false;
        }
      }.bind(this));
    },
    importTweet() {
      $.post("/import/save", {
        tweet_id: this.tweetID
      }, function(response) {
        if(response.error) {
          this.tweet = null;
          this.tweetID = null,
          this.previewTweet = false;
          this.error = response.error;
        } else {
          this.tweet = null;
          this.tweetID = null;
          this.previewTweet = false;
          this.error = false;
        }
      }.bind(this));
    }
  }
}
</script>