时间戳

首页 > 解决方案 > Laravel 和 Vue.js。我无法修复我的代码

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

问题描述

我正在开发一个应用程序来管理一些 Cv。

我所有的资源功能都运行良好（创建和编辑新的 Cvs 等）

但在我的 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');

我的控制台：

我的控制台

标签： laravelvue.js

解决方案

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

  • created在您的方法末尾有一个额外的“）”
  • 该methods属性缺少结束“}”
  • 最后缺少一个“）”来匹配左new Vue(括号。

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

然后，您需要将数据更新为返回对象的函数。请参阅Vue 文档 - 数据必须是函数

“响应”变量也有一些拼写错误。

最后，在您的 HTML 中，您有两个具有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();
        }
    }
});

让我知道这是否适合你。

推荐阅读