테이블 배열 문제에 대한 배열 배열

Question

Vue를 사용하여 테이블에 배열 데이터를 인쇄하는 데 몇 가지 문제가 있습니다. 누군가가 vue를 사용하여 값을 파싱하여 테이블에 넣을 수있게 도와 줄 수 있습니까? 아래 이미지 코드를 참조하십시오. 2의 배열이 없으면 작동하지만 여러 응답을하는 방법을 모르겠습니다.

이것은 내 기능 인해

// HTML 코드

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

// 끝 HTML

// 뷰 코드

 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

inputs을 응답 본문과 동일하게 설정하면됩니다.

this.inputs = response.body 

이 응답으로 inputs의 현재 값을 대체 할 것이다.

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