Question

我正在开发用于管理某些简历的应用程序。

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

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

我的控制台显示有关我的变量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

我的两个函数在CvController中获得了Experiences和addExperience：

    public function getExperiences($id){
$cv= Cv::find($id);
return $cv->infos;   
}

public function addExperience(Request $request){
$info = new Info;
$info->titre=$request->titre;
$info->body=$request->body;
$info->cv_id=$request->cv_id;
$info->save();

return response()->json(['etat'=> true, 'id'=> $info->id]);

}

这是我的路线：

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

我的控制台：

My console

Answer 1

有些语法错误需要首先修复。

created方法的末尾还有一个额外的“）”
methods属性缺少结尾的“}”
在末尾有一个与开头的new Vue(括号匹配的缺少的“）”。

缩进代码以使这些内容更容易发现是很有帮助的。

然后，您需要将数据更新为一个返回对象的函数。参见Vue Docs - Data Must Be a Function

您还对“响应”变量有一些错字。

最后，在HTML中，您有两个包含id="app"的div。

您的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();
        }
    }
});

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

Laravel和Vue.js。我无法修复我的代码

1 个答案: