VueJs und Laravel - mehrere Auswahlfelder

Question

Mit Laravel 5.4 und Vuejs 2,1

Im Code habe ich ein Auswahlfeld mit zwei Eingabefelder (Menge und Lager) in tr (Tabellenzeile). Tabellenzeile mit den Feldern dynamisch so viel hinzugefügt werden, wie Benutzer benötigt wird, dann ist dies der Code:

<tbody id="loads-content"> 
    <tr v-for="(item, index) in items"> 
    <td> 
     <select v-model="item.load_id" name="load_id[]" class="loads" v-on:change="getLoadStock()"> 
      <option v-for="load in loads" :value="load.id" :id="load.id">{{load.name}}</option> 
     </select> 
    </td> 
    <td><input type="text" v-model="item.quantity" name="quantity[]" class="input is-hovered qty"></td> 
    <td><input type="text" v-model="item.stock" class="input is-hovered stock" disabled readonly="true"></td> 
    <td> 
     <button type="button" class="button is-danger remove" @click="items.splice(index, 1)"><i class="fa fa-minus-square-o" aria-hidden="true"></i></button> 
    </td> 
    </tr> 
    <a @click="addLine" class="button is-success"><i class="fa fa-plus-square-o" aria-hidden="true"></i></a> 
</tbody> 

Wenn Sie einen Wert von Auswahlfeld wählen Ich brauche das LAGER Eingabefeld mit Bestandsdaten aus der Datenbank füllen . Dafür habe ich einen API-Aufruf verwendet. Ich habe etwas wie folgt gemacht:

methods: { 
     addLine() { 
      this.items.push({ 
       load_id: '', 
       quantity: '', 
       stock: '' 
      }) 
     }, 

     getLoadStock(){ 
      var loadsContent = $('#loads-content'); 
      var tr = loadsContent.parent().parent(); 
      var id = tr.find('.loads').val(); 

      axios.get('/api/load/' + id) 
        .then(function(response) { 
         tr.find('.stock').val(response.data.stock); 
        }) 
        .catch(function(error) { 
         console.log(error) 
        }); 

     }, 

Dieser Code funktioniert nicht wie erwartet.

Ziel ist es, den aktuellen Bestand für die aktuell gewählte Ladung zu holen, um zu sehen, wieviel Menge Sie im Eingabefeld für Menge eingeben können.

Ich bin offen für irgendwelche Vorschläge, wenn jemand einen besseren Ansatz und Lösung hat bitte helfen.

Vielen Dank im Voraus! :)

Answer 1

Sie mischen zwei verschiedene und inkompatible Möglichkeiten zum Erstellen einer Web-App: Vue.js und jQuery.

Wenn Sie Vue verwenden, sollten Sie das DOM nicht direkt manipulieren. Sie sollten stattdessen die DOM-Elemente an Vue-Modellattribute binden. Wenn Sie dann ein DOM-Element benötigen, das eine Änderung widerspiegelt, ändern Sie das Modell - nicht das DOM.

 <select v-model="item.load_id" name="load_id[]" class="loads" v-on:change="getLoadStock(index)"> 
     <option v-for="load in loads" :value="load.id" :id="load.id">{{load.name}}</option> 
    </select> 

und

getLoadStock(index){ 
     axios.get('/api/load/' + this.items[index].load_id) 
       .then(function(response) { 
        this.items[index].stock = response.data.stock; 
       }) 
       .catch(function(error) { 
        console.log(error) 
       }); 

    },