Data is not being shown in the view

Asked

Viewed 32 times

0

I am trying to render some data in a table using Vuejs. I am making a request with Axios as follows:

export default {
data() {
     return {
         movimentos: []
     };
},
mounted() {
        axios.get('urlDaAPIAqui/movimento')
        .then((response) => {
            console.log(response.data)
            this.movimentos = response.data
        })
    }
}

The data is coming in an Array, but I’m having trouble rendering in the table:

<tr>
                <th>Código</th>
                <th>Descrição</th>
                <th>Tipo</th>
                <th>Valor</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="movimento in movimentos">
                    <td>{{ movimento.mov_codigo }}</td>
                    <td>{{  }}</td>
                    <td>{{  }}</td>
                    <td>{{  }}</td>
                </tr>

Returned array:

Array

The data returned from the request are mov_codigo, mov_descricao, mov_tipo and mov_valor, I already tried to use all within td’s and it didn’t work.

Reply from Postman:

{
    "movimento": [
        {
            "mov_codigo": "m01",
            "cta_codigo": 1,
            "mov_tipo": "D",
            "mov_descricao": "Combustivel",
            "mov_valor": 154.56
        },

I hope someone can help me, thanks in advance.

vue.js

  • Ever tried to give a push in moves instead of assigning the value of the?

  • type this.movimentos.push(Sponse.data) ?

  • Ahan, there you go.

  • I tried it now and it didn’t work, on my console.log the answer is this: {error: false, date: Array(12)} An array of 12 items.

  • Then you have some problem with the Response. Put the array that is returned there in the question.

  • I’m going to post a picture of what it looks like because it gets bad from picking up the console..

  • Dude it’s kind of weird that there, if you open the code mov_code has what, inside these parentheses?

  • Guy opens this whole Answer for us to analyze, thinking that the Answer is not an array.

  • @Leandrade opened in Postman, it looks like an object, and inside it has an Array. I’ll put an example.

  • So, that’s what I suspected, it’s an array of objects, then it changes everything!

  • Hmmm, that’s right. Any suggestions for iterating?

  • I solved here, I passed Sponse.data.movement and it worked, thank you very much in any personal way!

Show 7 more comments

1 answer

0

Problem solved by adding Sponse.data.movement to the Xios request:

axios.get('https://projeto-bolsa.herokuapp.com/movimento')
            .then((response) => {
                console.log(response.data.movimento)
                this.movimentos = response.data.movimento
            })
            .catch(error => {
                console.log(error)
            })

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.