title: laravel vue.js The GET method is not supported for this route. Supported methods: POST
body: <p>I am creating commenting system. Now, I want to post a new comment, but when I send a comment, I got an error in <a href="http://127.0.0.1:8000/comments/51" rel="nofollow noreferrer">http://127.0.0.1:8000/comments/51</a>.</p>
  
  <blockquote>
    <p>The GET method is not supported for this route. Supported methods:
    POST.</p>
  </blockquote>
  
  <p>I want to post a comment in this URL <a href="http://127.0.0.1:8000/results/51" rel="nofollow noreferrer">http://127.0.0.1:8000/results/51</a>.</p>
  
  <p>In my chrome dev tool console, I have this error</p>
  
  <blockquote>
    <p>Failed to load resource: the server responded with a status of 500
    (Internal Server Error)</p>
  </blockquote>
  
  <p><code>web.php</code></p>
  
  <pre><code>Route::middleware(['auth'])-&gt;group(function(){
      //post a comment
      Route::POST('comments/{post}', 'CommentController@store')-&gt;name('comment.store');
  });
  
  
  //comment area
  Route::get('results/{post}/comments', 'CommentController@index');
  Route::get('comments/{comment}/replies', 'CommentController@show');
  </code></pre>
  
  <p><code>comments.vue</code></p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="commentarea" &gt; 
      &lt;div class="comment-posts" &gt;
          &lt;div v-if="!auth" class="user-comment-area" &gt;
              &lt;div  class="user-post"&gt;
                  &lt;!---&lt;img src="{{asset('people/person7.jpg')}}" class="image-preview__image"&gt;---&gt;
                  &lt;input v-model="newComment" type="text" name="comment"&gt;
              &lt;/div&gt;
              &lt;div class="comments-buttons"&gt;
                  &lt;button class="cancel-button"&gt;Cancel&lt;/button&gt;
                  &lt;button @click="addComment" class="comment-button" type="submit"&gt;Comment&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;h4&gt;Comments ()&lt;/h4&gt;
  
          &lt;div class="reply-comment"  v-for="comment in comments.data" :key="comment.id"&gt;
                  &lt;div class="user-comment"&gt;
                  &lt;div class="user"&gt;
                      &lt;!---&lt;img src="{{ $comment-&gt;user-&gt;img }}" class="image-preview__image"&gt;---&gt;
                      &lt;avatar :username="comment.user.name"&gt;&lt;/avatar&gt;
                  &lt;/div&gt;
                  &lt;div class="user-name"&gt;
                      &lt;span class="comment-name"&gt;&lt;a href=""&gt;{{ comment.user.name }}&lt;/a&gt;&lt;/span&gt;
                      &lt;p&gt;{{ comment.body }}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="reply"&gt;
                  &lt;button class="reply-button"&gt;
                      &lt;i class="fas fa-reply"&gt;&lt;/i&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
                  &lt;replies :comment="comment"&gt;&lt;/replies&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;button v-if="comments.next_page_url" @click="fetchComments" class="load"&gt;Load More&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Avatar from 'vue-avatar'
  import Replies from './replies.vue'
  export default {
      props: ['post'],
      components: {
          Avatar,
          Replies
      },
      mounted() {
          this.fetchComments()
      },
      data: () =&gt; ({
          comments: {
              data: []
          },
          newComment: '',
          auth: ''
      }),
      methods: {
          fetchComments() {
              const url = this.comments.next_page_url ? this.comments.next_page_url : `/results/${this.post.id}/comments`
  
              axios.get(url).then(({ data }) =&gt; {
                  this.comments = {
                      ...data,
                      data: [
                          ...this.comments.data,
                          ...data.data
                      ]
                  }
              })
              .catch(function (error) {
                  console.log(error.response);
              })
          },
          addComment() {
              if(! this.newComment) return
              axios.post(`/comments/${this.post.id}`, {
                  body: this.newComment
              }).then(( {data} ) =&gt; {
                  this.comments = {
                      ...this.comments,
                      data: [
                          data,
                          ...this.comments.data
                      ]
                  }
              })
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><code>commentsController.php</code></p>
  
  <pre><code>public function store(Request $request, Post $post)
  {
      return auth()-&gt;user()-&gt;comments()-&gt;create([
          'body' =&gt; $request-&gt;body,
          'post_id' =&gt; $post-&gt;id,
          'comment_id' =&gt; $request-&gt;comment_id
      ])-&gt;fresh();
  }
  </code></pre>
  
  <p><code>comment.php</code></p>
  
  <pre><code>protected $appends = ['repliesCount'];
  
  public function post()
  {
      return $this-&gt;belongsTo(Post::class);
  }
  
  public function getRepliesCountAttribute()
  {
      return $this-&gt;replies-&gt;count();
  }
  </code></pre>
  
  <p>I am glad if someone helps me out.</p>