Vue array to table issues

Question

Having some issues printing array data to a table using Vue. Can someone help me parse the values using vue and put them in a table. See code below image. Without the array of 2 it would work but I'm not sure how to with the response being multiple.

This is my function in due

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

Bert · Accepted Answer · 2017-09-08 01:39:10Z

2

Just set inputs equal to the response body.

this.inputs = response.body

This will replace the current value of inputs with the response. If you would like to add the response to inputs then you can concatenate the response to inputs:

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

edited Sep 8, 2017 at 1:39

answered Sep 8, 2017 at 1:30

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Phil Over a year ago

On the off-chance that inputs already has some data (since OP is using Array.prototype.push in their code), maybe try this.inputs = this.inputs.concat(response.body)

Bert Over a year ago

@Phil Sure :) Added.

Collectives™ on Stack Overflow

Vue array to table issues

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related