在StatusResource.php中使用模型关系时，无法使用Vue.js删除状态

Question

我正在使用Laravel和Vue.js

当要加载某些状态时，我想列出特定状态下的所有注释。这意味着我想通过已加载状态的资源获取所有评论。列出了所有我希望能正常使用的注释，但随后又有另一个问题。我再次测试我的应用，当我尝试删除某些状态时，出现此错误：

exception: "ErrorException"
file: "C:\xampp\htdocs\thirteen\app\Http\Resources\StatusResource.php"
line: 30
message: "Undefined variable: comments"

当我删除'comments'=> $ comments，和 $ status = Status :: find（$ this-> id）; 和 $ comments = $ status-> comments; 一切正常。

这是我的StatusResource.php文件：

 <?php

namespace App\Http\Resources;

 use App\Comment;
 use App\Status;
 use App\User;
 use Carbon\Carbon;
 use Illuminate\Http\Resources\Json\JsonResource;

class StatusResource extends JsonResource
{
    public function toArray($request)
    {
        $user = User::find($this->user_id);
        $isAuthor = auth()->user()->id === $user->id;

        $status = Status::find($this->id);
        $comments = $status->comments;
        

        Carbon::setLocale('sr');
        return [
            'id' => $this->id,
            'description' => $this->description,
            // 'isAuthor' => $isAuthor,
            'comments' => $comments,
            'authorName' => $user->name,
            'created' => $this->created_at->diffForHumans(),
        ];
    }
}

这是我的AllStatuses.vue文件：

    <template>
    <div class="container mt-3">
        <create-status ref="CreateStatus"></create-status>
        <div class="card mt-3" v-for="status in statusObject.data" v-bind:key="status.id">
            <div class="card-header d-flex">
                <div class="p-2">{{status.authorName}}</div>
                <div class="ml-auto p-2">{{status.created}}</div>
            </div>
            <div v-html="status.description" class="card-body"></div>

            <div class="ml-auto"><button @click="deleteStatus(status.id)" class="btn btn-link">Izbriši</button></div>
            
            <hr>
            
            <p>Komentari:</p>
            <!-- <div v-for="comment in status.comments" v-bind:key="comment.id">
                
                    {{comment.comment}}
  
            </div> -->
        </div>
            <pagination class="mt-3" :data="statusObject" @pagination-change-page="getResults"></pagination>

    </div>
</template>

<script>
import Swal from "sweetalert2";
import VueToastr from "vue-toastr";


export default {
    name : "AllStatuses",
    
  data () {
      return {
          statuses : [],
          statusObject : {},
          statuses : [],
          statusId : null,
      }
  },
    mounted() {
        this.fetchStatuses();
        // this.fetchComments();
    },
    methods : {
        // statusIdFunction (id) {
        //     this.statusId = id;
        //     console.log(id)
        // },
        // async fetchComments() {
        //     const {data} = await axios.get(`/api/status/${statusId}/comment`);
        //     this.statuses = data.data;
        //     this.statusId = null;
        // },
        async fetchStatuses() {
            const {data} = await axios.get('/api/status');
            this.statuses = data.data;
            this.statusObject = data;
        },
        async deleteStatus(statusId) {
            const result = await Swal.fire({
            title: "Da li ste sigurni?",
            text: "Ovaj status će biti izbrisan!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#9b1c1c",
            cancelButtonColor: "#d2d6dc",
            confirmButtonText: "Obriši",
            cancelButtonText: "Odustani",
            reverseButtons: true,
      });
      if (!result.value) return;
      const {data} = await axios.delete(`/api/status/${statusId}`);
      this.$toastr.defaultPosition = "toast-bottom-right";
      this.$toastr.s("Status uspješno izbrisan!");
      return (this.statusObject.data = this.statusObject.data.filter(
        (status) => status.id !== statusId
      ));
        },
        getResults(page = 1) {
            axios.get('api/status?page=' + page)
                .then(response => {
                    this.statusObject = response.data;
                });
        },
    }
}
</script>

我希望我的问题是可以理解的...如果不是，请在评论中询问更多信息。预先感谢！