vue.js - Vue 数组到表的问题

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

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

Answer 1

只需将 inputs 设置为响应主体即可。

this.inputs = response.body

这将用响应替换 inputs 的当前值。如果您想将响应添加到inputs，那么您可以将响应连接到inputs:

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