表格模式在laravel與VUE JS結合

我有2種型號Tour.php表格模式在laravel與VUE JS結合

public function Itinerary() 
{ 
    return $this->hasMany('App\Itinerary', 'tour_id'); 
}

和Itinerary.php

public function tour() 
{ 
    return $this->belongsTo('App\Tour', 'tour_id'); 
}

tours表：

id|title|content

itineraries表：

id|tour_id|day|itinerary

在tour-edit.blade.php視圖我已經使用vue js爲day和動態創建或添加和刪除輸入字段。

守則tour-create.blade.php

<div class="row input-margin" id="repeat"> 
     <div class="col-md-12"> 
     <div class="row" v-for="row in rows"> 
      <div class="row"> 
      <div class="col-md-2"> 
       <label >Day:</label> 
       <input type="text" name="day[]" 
       class="form-control">    
      </div> 
      <div class="col-md-8"> 
       {{ Form::label('itinerary', " Tour itinerary:", ['class' => 'form-label-margin'])}} 
       {{ Form::textarea('itinerary[]',null, ['class' => 'form-control','id' => 'itinerary']) }} 
      </div> 
      <div class="col-md-2"> 
       <button class="btn btn-danger" @click.prevent="deleteOption(row)"> 
       <i class="fa fa-trash"></i></button> 
      </div> 
      </div> 

     </div> 
     <div class="row"> 
      <button class="btn btn-primary add" @click.prevent="addNewOption" > 
      <i class="fa fa-plus"></i> Add Field</button> 

     </div> 
     </div> 
    </div>

我想填充與它們各自的數據這些字段。但是，所有屬於旅程的數據（即行程）都將以JSON格式顯示在itinerary文本框中。

我VUE JS sript是：

<script> 
var App = new Vue({ 
el: '#repeat', 
data: { 
    day:1 , 
    rows:[ 
    @foreach ($tour->itinerary as $element) 
    {day: '{{$element->day}}', plan: '{{$element->plan}}'}, 
    @endforeach 
    ] 
}, 

methods: { 

    addNewOption: function() { 
    var self = this; 
    self.rows.push({"day": "","itinerary":""}); 
    }, 

    deleteOption: function(row) { 
    var self = this; 
    self.rows.splice(row,1); 
    }, 

} 
}); 
</script>

來源

2017-06-13 Tanja Forsberg

我會避免攪拌葉片成JavaScript，而不是最好的選擇是做一個AJAX調用它返回json數據的API路線，然後可以通過Vue公司進行處理：

methods:{ 
    getItinerary(){ 
    axios.get('api/itinerary').then(response => { 
     this.itinerary = response.data; 
    }) 
    } 
}

然而，用這種方法，你可能會需要使用vue-router而非laravel網絡路線，這使我們進入SPA領土。

如果這不是一個選項（即您仍然想使用blade模板），那麼您應該看看this answer我前些日子給出了一個示例，該示例顯示如何從刀片模板中初始化數據。

你似乎什麼到使用laravel的形式模型綁定來填充表單，不Vue做，所以你的模型數據沒有被綁定到視圖。所以，你需要決定你想使用哪一個。如果是VUE你只是想用一個正常的形態和底層數據綁定使用它來v-model：

現在在視圖中的任何更新都將自動被更新Vue公司。我已經將JSFiddle放在一起，假設您將繼續使用Laravel Web路徑和刀片模板向您展示解決此問題的一種方法：https://jsfiddle.net/w6qhLtnh/

來源

2017-06-13 10:58:48

表格模式在laravel與VUE JS結合

回答

相關問題