Formular modal in Laravel mit vue js Bindung

Question

Ich habe 2 Modelle Tour.php

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

und Itinerary.php

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

tours Tabelle:

id|title|content 

itineraries Tabelle:

id|tour_id|day|itinerary 

In tour-edit.blade.php Ansicht Ich habe Vue Js verwendet, um Eingabefeld für day und plan dynamisch zu erstellen oder hinzuzufügen und zu entfernen.

-Code in 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> 

Ich möchte diese Felder mit ihren jeweiligen Daten füllen. Alle Daten, die zu einer Tour gehören, werden jedoch in der Textbox itinerary im JSON-Format angezeigt.

Mein vue js sript ist:

<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> 

Answer 1

ich vermeiden würde Klinge in JavaScript Mischen, sondern die beste Möglichkeit ist, einen Ajax-Aufruf zu einer api Route zu machen, die in json Ihre Daten zurückgibt, die dann von Vue verarbeitet werden:

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

jedoch mit diesem Ansatz, den Sie wahrscheinlich vue-router verwenden müssen, anstatt Laravel Web-Routen, die uns in SPA Gebiet setzt.

Wenn das keine Option ist (d. H. Sie möchten immer noch blade Vorlagen verwenden), sollten Sie einen Blick auf this answer werfen Ich gab den anderen Tag, der zeigt, wie Sie Daten aus Ihren Blade-Vorlagen initiieren.

Was Sie scheinen Ihre Formulare zu tun ist Laravel Formularmodell Bindung zu füllen, nicht Vue, so dass die Daten Ihres Modells ist die Ansicht nicht gebunden. Sie müssen also entscheiden, welche Sie verwenden möchten. Wenn es vue du nur eine normale Form verwenden möchten, und binden die zugrunde liegenden Daten, um es mit v-model:

Jetzt alle Aktualisierungen in der Ansicht automatisch von Vue aktualisiert werden. Ich habe ein JSFiddle zusammengestellt, das davon ausgeht, dass Sie weiterhin Laravel-Webrouten und Blade-Vorlagen verwenden möchten, um Ihnen einen Ansatz für dieses Problem zu zeigen: https://jsfiddle.net/w6qhLtnh/