Javascript 如何使用Laravel和vue js在数据库中显示单个记录？

嗨，如何使用vue js在数据库上显示单个记录？我设法显示了多行，但无法显示一行。这就是我所做的

<template>
  <div class="container">
    <div class="card-panel z-depth-5 grey lighten-2">
      <blockquote>
        <h3>
          <b>{{tutorial.attributes.title}}</b>
        </h3>
      </blockquote>
      <p class="flow-text">{{tutorial.attributes.content}}</p>
    </div>
  </div>
</template>

<script>
export default {
    name: 'tutorial',
  data: function() {
    return {
        tutorial = {
            id: '',
            content : null,
            title : '',
        },
    };
  },
  mounted() {
    const tutorial_id = this.id;
  },
  props: ['id'],
  methods: {
    get_tutorial: function() {
      //load the tutorials from the api
      axios
        .get('/api/view/' + tutorial_id )
        .then(response => {
          // asign it to data
          this.id = response.data.data.id;
          this.cpntent = response.data.data.content;

        })
        .catch(function(error) {
          // catch errors
          console.log(error);
        });
    }
  }
};
</script>

这是我的刀：

@extends('layouts.main')
@section('styles')
<style>
.card-panel { 
  border-radius:5px;
}
</style>
@stop 
@section('content')

    <div class="app  ">
          <view-tutorial 
          :id="{{ $post->id }}" 
          >
          </view-tutorial>
    </div>

@endsection

@section('scripts')
<script>
<script src="{{mix('js/app.js')}}"></script>
</script>
@ensection

---

谢谢。我将感谢所有的帮助

您可以使用路由模型绑定。并从数据库中获取特定记录

阅读文件：

---

将

tutorial={…

更改为

tutorial:{…

除了从答案中，获得这样一篇文章

post:：all（）->where（'id'，$id）

不是一个好的做法-您从数据库中获取每一篇文章，并在应用程序级别进行过滤-让数据库为您这样做。

@extends('layouts.main')
@section('styles')
<style>
.card-panel { 
  border-radius:5px;
}
</style>
@stop 
@section('content')

    <div class="app  ">
          <view-tutorial 
          :id="{{ $post->id }}" 
          >
          </view-tutorial>
    </div>

@endsection

@section('scripts')
<script>
<script src="{{mix('js/app.js')}}"></script>
</script>
@ensection

SyntaxError: C:\projects\php\blogSite\resources\js\components\View_tutorial.vue: Unexpected token (19:17)

  17 |   data: function() {
  18 |     return {
> 19 |         tutorial = {
     |                  ^
  20 |             id: '',
  21 |             content : null,
  22 |             title : '',