076server/resources/js/components/comments.vue

<template>
  <div id="comments" class="comments-area clearfix">
		<h3 class="comments-count section-heading uppercase"><span>{{ total }} コメント</span></h3>
    <div v-if="total === 0">コメントがありません。</div>
    <span v-else>
      <ul class="commentlist" v-for="(c, i) in comment" :key="`comment-${i}`">
        <li class="comment even thread-even depth-1" :id="`li-comment-${c.id}`">
          <div class="commentnumber">{{ i+1 }}</div>
          <div :id="`comment-${c.id}`">
            <div>
              <cite class="fn">
                <span v-if="isvideo === 'n'">
                  <img style="height: 24px;" :src="c.icon" :alt="`${c.name}さんのアイコン`">
                  <a :href="c.channel">{{ (c.name || '名無しのテクニシャン') }}</a>
                </span>
                <span v-else>
                  <span v-if="c.user_id"><a :href="`/profile/${c.user_id}`" :style="c.showcol"><img style="width: 24px; height: 24px;" :src="c.avatar" :alt="`${c.showname}さんのアイコン`"> {{ c.showname }}</a></span>
                  <span v-else>{{ (c.name || '名無しのテクニシャン') }}</span>
                </span>
              </cite> <span class="says">より:</span>
              <span class="comment-meta commentmetadata"> <a :href="`/blog/${slug}#comment-${c.id}`">{{ c.created }}</a></span>
            </div>
            <p style="white-space: pre-wrap;">{{ c.message }}</p>
            <div class="reply">返信</div>
          </div>
        </li>
      </ul>
    </span>
    <span v-if="isvideo !== 'n'">
      <hr />
      <div v-if="err" class="alert alert-danger">{{ err }}</div>
      <span v-if="user.length === 0">
        <div class="form-group row">
          <div class="col-md-4 col-lg-3">名前</div>
          <div class="input-group col-md col-lg">
            <input type="text" id="new-name" class="form-control" v-model="newComment.name" placeholder="ご入力しない場合、名前は「名無しのテクニシャン」になります。" />
          </div>
        </div>
        <div class="form-group row">
          <div class="col-md-4 col-lg-3">メールアドレス</div>
          <div class="input-group col-md col-lg">
            <input type="text" id="new-mail" class="form-control" v-model="newComment.mail" placeholder="返信される場合、メールに通知を送ります。" />
          </div>
        </div>
      </span>
      <span v-else>
        <div class="form-group row">
          <div class="col-md-4 col-lg-3">名前</div>
          <div class="input-group col-md col-lg">
            <a :href="`/profile/${user.user_id}`" :style="user.showcol"><img style="width: 24px; height: 24px;" :src="user.avatar" :alt="`${user.showname}さんのアイコン`"> {{ user.showname }}</a>
          </div>
        </div>
      </span>
      <div class="row">
        <div class="col-md-4 col-lg-3">本文</div>
        <div class="col-md col-lg">
          <textarea class="form-control" id="new-message" rows="16" v-model="newComment.text"></textarea>
        </div>
      </div>
      <div class="row" style="margin-top: 16px;">
        <div class="col">
          <button type="button" class="btn btn-block btn-primary" @click="send">送信</button>
        </div>
      </div>
    </span>
	</div>
</template>

<script>
  export default {
    props: { user: Array, slug: '', isvideo: '', comments: Array },
    data: function () { return { comment: this.comments, newComment: {}, err: '', loading: true, sending: false } },
    computed: {
      total: function () {
        return this.comment.length;
      }
    },
    created: function () { this.reset(); },
    methods: {
      reset () {
        this.loading = false;
        this.newComment.name = '';
        this.newComment.mail = '';
        this.newComment.text = '';
      },
      send () {
        if (this.isvideo !== 'n') {
          this.err = '';
          this.sending = true;

          axios.post('/api/comment/new', {
            user_id: this.user.user_id,
            comment: this.newComment,
            isvideo: this.isvideo,
            slug: this.slug
          }).then(res => {
            this.sending = false;
            if (res.data.status === '010100') { this.comment.push(res.data.result); this.reset(); }
            else this.err = 'エラーコード【' + res.data.status + '】' + res.data.message;
          }).catch(err => {
            this.sending = false;
            this.err = 'サーバーエラーコード【' + err.response.status + '】' + err.response.data.message;
          });
        }
      }
    }
  }
</script>

<style scoped>
  .fn {
    font-size: 16px;
    font-style: normal;
    color: #20ec77;
  }
  .comment-meta a {
    color: #bdc3c7;
  }
  .commentlist p {
    margin: 0 0 10px;
    padding: 10px 0 40px 0;
    font-size: 20px;
  }
  .commentnumber {
    float: left;
    margin-right: 5px;
    font-size: 16px;
  }
  ul {
    list-style: none;
  }
</style>