Vue Array zu Tabelle Probleme

Question

Probleme beim Drucken von Array-Daten in einer Tabelle mit Vue. Kann jemand mir helfen, die Werte mit vue zu analysieren und sie in eine Tabelle zu legen. Siehe Code unter Bild. Ohne das Array von 2 würde es funktionieren, aber ich bin nicht sicher, wie mit der Antwort sein mehrere.

Dies ist meine Funktion gegebener

// HTML-Code

 <tbody> 
     <tr v-for="(input, index) in inputs"> 
      <th>((input.id))</th> 
      <th>((input.tracking_number))</th> 
      <td>((input.first_name))</td> 
      <td>((input.last_name))</td> 
      <td>((input.weight))</td> 
      <td>((input.description))</td> 
      <td>((input.courier))</td> 
     </tr> 
    </tbody> 

// end HTML

// Vue-Code

 var app = new Vue({ 
     el: '#app', 
     data: { 
     inputs: [], 
     form: { 
     scanval: null 
     } 
     }, 
     methods: { 
     updatetable() { 
     this.$http.get('someroute', {params: {page: this.form}}) 
     .then(response => { 
      if (response.body != "null") { 
      console.log(response); 
      this.inputs.push({ 
       id: response.body.id, 
       tracking_number: response.body.tracking_number, 
       first_name: response.body.first_name, 
       last_name: response.body.last_name, 
       weight: response.body.weight, 
       description: response.body.description, 
       courier: response.body.courier 
      }) 
      this.form.scanval = "" 
      } else { 
      this.form.scanval = "", 
      alert("No items found") 
      } 
     }, response => { 
      alert("no item found"); 
     }); 
    }, 

Answer 1

Setzen Sie einfach inputs gleich dem Antworttext.

this.inputs = response.body 

wird dieser den aktuellen Wert von inputs mit der Antwort ersetzen. Wenn Sie möchten die Antwort auf inputs hinzufügen, dann können Sie die Antwort auf inputs verketten:

this.inputs = this.inputs.concat(response.body)