Property or method is not defined

Question

laravelとnuxt.jsでレビュー機能を作成したいです。
Property or method comment is not defined ,Property or method stars is not defined とエラーが出てしまいます。dataのところにcomment:'',stars: '',と記述しているのですが、エラーが解決しないので、アドバイスをいただきたいです。
下記のサイトを参考にさせていただいてます。
https://blog.capilano-fw.com/?p=7341

index.vue
<template>
<div class="modal fade" id="review-modal">
  <div class="form-group">
            <div class="name" > 
            <div class="post_name" v-for="post in posts" >
            <div class="box"> <nuxt-link :to="`post/${post.id}`">     
              {{post.name}}</nuxt-link><div class="content2">
               {{post.content2}}
              </div><img v-bind:src="post.path" class="image" >
 　　　　　　　　　 <a href="#" type="button" v-if="!hasMyReview(p.reviews)" @click.prevent="openReviewForm(p.id)">
                    レビューを投稿
               </a>             
              </div>  
                 
                </div>           
          </div>
        </div>
            <h4>スター</h4>
            <div v-for="star in [5,4,3,2,1]">
              <input v-model="stars" type="radio" :value="star">
            </div>
                <div class="form-group">
                        <h4>コメント</h4>
                        <textarea class="form-control" v-model="comment"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link mr-2" data-dismiss="modal">閉じる
                    </button> 
                <button type="button" class="btn btn-warning" @click="onSubmit">登録する
                </button>        
   </div> 
 </div>                    
</template>

<style>
.body-style {
  background-color: #eee;
}
.form-group{
    color:black;
}
</style>

<script>
import axios from 'axios';
layout:'sample_layout',
export default {  
  data: {
            userId: parseInt('{{ auth()->user()->id ?? -1 }}'), // ログイン・ユーザーID ・・・ ⑤
            posts: [],
            post:[],
            stars: '',
            reviewParams: {
            post_id: '',
            comment:''
            }
        },
        head: {
  
  }、
  created(){
  axios.get(`http://127.0.0.1:8000/api/review`)
          .then(response => {
          this.posts= response.data.posts
          
          });
          
  },
    methods: {
        onSubmit(postId) {
            axios.post('http://127.0.0.1:8000/api/post', {
            .then(response => {

                        if(response.data.result === true) {

                            this.getPosts();
                            $('#review-modal').modal('hide');

                        }
               
            })
            .then((res) => {
                console.log(res)
                this.stars = '';
                this.comment = '';
                this.save = true;
                console.log('created');
            });
        }
    },
}

<?php

namespace App\Http\Model;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    public function posts()
    {
        return $this->hasMany('App\Models\Post');
    }
}

ReviewController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ReviewController extends Controller
{
    public function review(Request $request)
    {
      $post = Post::all();
      return response()->json(compact('post'),200);
    }

    public function post(Request $request) {
        if(!auth()->check()) {
          $fail('レビューするにはログインしてください。');
          return;
      }
      
        $review = new \App\PostReview();
        $review->post_id = $request->post_id;
        $review->user_id = $request->user()->id;
        $review->stars = $request->stars;
        $review->comment = $request->comment;
        $result = $review->save();
        return ['result' => $result];
       }
      
}

api.php
Route::get('/review','ReviewController@review');
Route::post('/posts','ReviewController@post');

Answer 1

関数にすると、いかがでしょうか。

data() {
  return {
    // ...
    comment: '',
    // ...
  }
}