Laravel 拉维公司；Vue.js。我能'；我不能修改我的代码

我正在开发一个应用程序来管理一些简历

我所有的资源功能都工作得很好（创建和编辑新简历等）

但在我的Vue.js部分中，它是关于在show视图中显示每个Cv的详细信息，使用Axios从数据库中获取数据或使用表单发布

我的控制台显示有关我的变量的反应性问题：

infos

和

info

下面是我的show.blade.php代码：

@extends('layouts.app')
@section('content')
<div class ="container" id="app">
<div class="container" id="app">
 <div class ="row">
      <div class="col-md-12">

    <div class="panel-panel-primary">
        <div class="panel-heading">
             <div class="row">
                 <div class="col-md-18"> <h3 class="panel-title"> Experience </h3></div>
                 <div class="col-md-2 text-right">
                      <button class="btn btn-success" > Ajouter</button>
                </div>
             </div>
        </div>     

    <div class="panel-body" >
      <ul class="list-group">
          <li class="list-group-item" v-for="info in infos">
              <div class="pull-right">
                   <button class="btn btn-warning btn-sm">Edit</button>
               </div>
                   <h3>@{{ info.titre }}</h3>
                   <p>@{{ info.body }}</p>
           </li>
        </ul>
     </div>
</div>
     </div>
   </div>
    <div >
        <form class="flex flex-col" @submit.prevent="addExperience">
             <textarea class="border rounded p-2 mp-3" v-model="info.titre"></textarea>
             <textarea class="border rounded p-2 mp-3" v-model="info.body"></textarea>
             <button type="submit" class="border rounded py-2">Commenter</button>
         </form>
    </div>
</div>
</div>
@endsection

@section('javascripts')

<script src="{{ asset('js/vue.js')}}"> </script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
        window.Laravel={!! json_encode([
           'csrfToken' => csrf_token(),
           'idExperience' => $id,
           'url' =>url('/')]) !!} ;
</script>
<script>
        var app= new Vue({
        el:'#app',
        data:{
        message: '',
        infos: [],
        info:{
            id:0,
            cv_id:window.Laravel.idExperience,
            titre:'',
            body:'',
        }},
        methods:{
            getExperiences: function() {
                axios.get(window.Laravel.url+'/getexperiences/'+window.Laravel.idExperience)
                .then(response=>{
                    console.log(reponse.data);
                    this.info=reponse.data;})
                .catch(error =>{
                    console.log('errors: ', error);})},
            addExperience:function(){
                axios.post(window.Laravel.url+'/addexperience', this.info)
                .then(repsonse => {
                if(response.data.etat){

                this.infos.unshift(this.info);
                this.info={
            id:0,
            cv_id:window.Laravel.idExperience,
            titre:'',
            body:'',
                };}})
                 .catch(error =>{
                    console.log('errors: ', error)})},
         created:function(){
         this.getExperiences();})};   
</script>    
@endsection 

以下是我的路线：

Route::resource('cvs','CvController'); 
Route::get('/getexperiences/{id}', 'CvController@getExperiences');
Route::post('/addexperience', 'CvController@addExperience');

我的控制台：

---

有些语法错误需要先修复

• 在您创建的

  方法的末尾有一个额外的“）”

• methods

  属性缺少结束“}”
• 最末端缺少一个“）”以匹配开头的

  新Vue（

  括号）

缩进代码有助于使这些内容更容易发现

然后，需要将数据更新为返回对象的函数。请参阅

“response”变量也有一些输入错误

最后，在HTML中有两个div，其中包含

id=“app”

您的JS应该如下所示：

var app = new Vue({
    el: '#app',
    data: {
        message: '',
        infos: [],
        info: {
            id: 0,
            cv_id: window.Laravel.idExperience,
            titre: '',
            body: '',
        }
    },
    methods: {
        getExperiences: function () {
            axios.get(window.Laravel.url + '/getexperiences/' + window.Laravel.idExperience)
                .then(response => {
                    console.log(reponse.data);
                    this.info = response.data;
                })
                .catch(error => {
                    console.log('errors: ', error);
                })
        },
        addExperience: function () {
            axios.post(window.Laravel.url + '/addexperience', this.info)
                .then(response => {
                    if (response.data.etat) {

                        this.infos.unshift(this.info);
                        this.info = {
                            id: 0,
                            cv_id: window.Laravel.idExperience,
                            titre: '',
                            body: '',
                        };
                    }
                })
                .catch(error => {
                    console.log('errors: ', error)
                })
        },
        created: function () {
            this.getExperiences();
        }
    }
});

让我知道这是否对您有效。

谢谢：）但仍然无效。相同的错误消息。。我没有改变你的回复代码。这是正确的吗？

var app = new Vue({
    el: '#app',
    data: {
        message: '',
        infos: [],
        info: {
            id: 0,
            cv_id: window.Laravel.idExperience,
            titre: '',
            body: '',
        }
    },
    methods: {
        getExperiences: function () {
            axios.get(window.Laravel.url + '/getexperiences/' + window.Laravel.idExperience)
                .then(response => {
                    console.log(reponse.data);
                    this.info = response.data;
                })
                .catch(error => {
                    console.log('errors: ', error);
                })
        },
        addExperience: function () {
            axios.post(window.Laravel.url + '/addexperience', this.info)
                .then(response => {
                    if (response.data.etat) {

                        this.infos.unshift(this.info);
                        this.info = {
                            id: 0,
                            cv_id: window.Laravel.idExperience,
                            titre: '',
                            body: '',
                        };
                    }
                })
                .catch(error => {
                    console.log('errors: ', error)
                })
        },
        created: function () {
            this.getExperiences();
        }
    }
});