gistfile1.txt

<template>
  <div class="tweet">
    <article class="media">
      <figure class="media-left">
        <p class="image is-64x64">
          <img class="user-image" :src="tweet.userImage">
        </p>
      </figure>
      <div class="media-content">
        <div class="content">
          <p>
            <strong>{{ tweet.name }}</strong>
            <img class="verified-icon"
                 src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/twitter_verified.png"
                 v-if="tweet.verified"/>
            <small>{{ tweet.handle }}</small>
            <small class="time-lapsed">{{ tweet.timeLapsed }}</small>
            <br>
            <span class="description" v-html="computedDescription"></span>
          </p>
        </div>
        <div v-if="tweet.tweetImage" class="tweet-image">
          <img :src="tweet.tweetImage"/>
        </div>
        <nav class="level is-mobile">
          <div class="level-left">
            <a class="level-item">
              <span class="icon is-small"><i class="far fa-comment"></i></span>
            </a>
            <a class="level-item">
              <span class="icon is-small"><i class="fas fa-retweet"></i></span>
            </a>
            <a class="level-item heart" @click="like">
                  <span class="icon is-small">
                    <i class="far fa-heart"
                       :class="{'fas': this.tweet.upVoted}"></i>
                  </span>
              <p :class="{'bold': this.tweet.upVoted}">
                {{ new Intl.NumberFormat().format(tweet.likes) }}
              </p>
            </a>
          </div>
        </nav>
      </div>
    </article>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
  props: {
    tweetData: {
      type: Object,
    },
  },
})
export default class TwitterComponent extends Vue {
  tweet: Tweet = {
    name: '테스트',
    userImage: 'string',
    handle: 'string',
    timeLapsed: 'string',
    tweetImage: 'Blob | string',
    description: 'string',
    likes: 0,
    upVoted: false,
  }

  /* todo  created() {
    this.tweetData = this.tweet;
  } */

  get computedDescription() {
    return this.tweet.description.split(' ').map((word) => {
      let w = '';
      if (word[0] === '@' || word[0] === '#') {
        w = `<span class="highlighted">${word}</span>`;
      }
      return w;
    }).join(' ');
  }

  like() {
    console.log('like', this);
    // do nothing
    // this.tweetData.upVoted ? this.tweetData.likes-- : this.tweetData.likes++;
    // this.tweetData.upVoted = !this.tweetData.upVoted;
  }
}
</script>

<style scoped>

</style>