How can I create a list from this multidimentional array with Vuejs

Question

Hi I have an axios which it returns to an array like this one:

My axios code:

axios.post('/api/hr_employee/days/'+ this.period_data.year +'/'+ this.period_data.month +'?page='+this.currentPage+'&api_token='+App.apiToken)
                .then(response => {
                    this.posts = response.data.data;
                    console.log(this.posts);
                    this.rowsQuantity = 1000;
                })

The response:

full_name: ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",…], rut: ["06152617-K", "06628494-8", "06802969-4", "06974036-7", "07066149-7", "07174172-9", "07274753-4",…], total_days: [30, 30, 30, 21, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 27, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,…]

How you can see it is a multidimensional full_name, rut, days..

    <tr v-for="(row, idx1) in posts">
        <td>{{ row.full_name }}</td>
        <td>{{ row.rut }}</td>
        <td>
         <input type="number" class="form-control" id="exampleInputEmail1" v-model="row.days" placeholder="">
        </td>
    </tr>

I wonder how can I list like above? I tried everything and I can not be able to do it

Thanks!

Qoyyima Fias Salam · Accepted Answer · 2021-10-14 18:00:08Z

1

Do you want to have a table with three columns that are full_name, rut, and an input with total rows equal to response.full_name.length or response.rut.length or response.total_days.length?

If so you can try this:

<tr v-for="(fullName, index) in posts.full_name"> // assuming full_name and rut and total_days have same length
    <td>{{ fullName }}</td>
    <td>{{ posts.rut[index] }}</td>
    <td>
     <input />
    </td>
</tr>

Please let me know if this is what you really ask or not

answered Oct 14, 2021 at 18:00

Qoyyima Fias Salam

1847 bronze badges

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

Collectives™ on Stack Overflow

How can I create a list from this multidimentional array with Vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related