programing

Vue 어레이에서 테이블로의 문제

goodcopy 2022. 8. 28. 18:49
반응형

Vue 어레이에서 테이블로의 문제

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

//Vue 코드

      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");
        });
    },

셋팅 완료inputs응답 주체와 동일합니다.

this.inputs = response.body

그러면 현재 값이 대체됩니다.inputs반응과 함께.응답을 추가할 경우inputs그 후, 응답을 접속할 수 있습니다.inputs:

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

언급URL : https://stackoverflow.com/questions/46107211/vue-array-to-table-issues

반응형