带有Vue JS的Laravel Like系统

Question

我正在创建一个博客网站，该网站的所有者可以创建或撰写博客或书籍。

现在，我们将专注于写书。到目前为止，我一切正常。她可以写一本书并在其中添加章节。现在她说读者有能力喜欢每一章。

我所做的就是这样

ReadChapter.blade.php

    <section id="main-content">
      <div class="chapter-container">
        <div class="chapter-title text-center">{{$the_chapter->title}}</div>
        <community-reaction :chapter_id="{{$the_chapter->id}}" :view_counts="{{$the_chapter->view_count}}" :user_id="{{Auth::user()->id}}"></community-reaction>
        <div class="chapter-body" oncopy="return false" onpaste="return false" oncut="return false">
          {!!$the_chapter->body!!}
        </div>
      </div>
    </section>

CommunityReactionComponent.vue

<template>
  <div>
    <div class="community-chapter-reaction-section">
      <div><i class="fas fa-eye"></i> {{view_counts}}</div>
      <div style="cursor: pointer;" v-if="!loved_chapter"><i class="fas fa-heart" @click="loveChapter(chapter_id)"></i> {{love_count}}</div>
      <div style="cursor: pointer;" v-else><i class="fas fa-heart" style="color: red;" @click="unloveChapter(chapter_id)"></i> {{love_count}}</div>
      <div><i class="fas fa-comments"></i> 0</div>
    </div>
  </div>
</template>

    <script>
      export default {
          props: ['chapter_id', 'view_counts', 'user_id'],
          data() {
              return {
                  love_count: 0,
                  loved_chapter: false,
                  chapter_lovers_id: []
              }
           },
           methods: {
               loveChapter(id) {
                   axios.post('/love-chapter/', {chapter_id: id}).then(result => {
                       this.getChapterLoves();
                   });
               },
               unloveChapter(id) {
                   axios.post('/unlove-chapter/', {user_id: this.user_id, chapter_id: id}).then(result => {
                   this.getChapterLoves();
                   });
               },
               getChapterLoves() {
                   this.chapter_lovers_id = [];
                   axios.post('/get-chapter-love', {id: this.chapter_id}).then(result => {
                   this.love_count = result.data.length;
                   for(let i in result.data) {
                         
                       this.chapter_lovers_id.push(result.data[i].user_id);
                   }
                   let love_checker = this.chapter_lovers_id.includes(this.user_id);

                        if(love_checker == true) {
                            this.loved_chapter = true;
                        } else {
                            this.loved_chapter = false;
                        }
                   });
		    	}
	    	},
	    	created() {
	    		this.getChapterLoves();
		    }
	    }
    </script>

喜欢或喜欢本章都很好。我所要问的是，可以吗？或有什么有效的方法吗？谢谢！

也不必费神去思考为什么我没有将它变成1个完整的Vue组件。我只想刷新我的Laravel技能，因为我的大部分工作是使用Laravel后端的纯Vue JS。这个项目是为了刷新我对Laravel的知识并从中学习一些新知识。谢谢！