How do I solve this problem when rendering a list with Vue and Axios?

Question

I use a node in the backend where I perform a query and send the data via JSON. This data is requested in the frontend by axios and rendered by Vue. The data normally arrives at the front, the problem is that when rendering the list, the vue does not render.

Below I send the query code on the backend:

routeruser.post('/tesvue', function(req, res){
   
  const teste =dadoslances.findAll()
  .then( function(resp){
    
    res.json(resp)
    return resp
  }, function(err){
    res.json({resp: "falha"})

    return err
  });

})

The Vue code where the data for this query is requested is as follows:

var applance = new Vue({
el: '#lancapp',
data(){
        return {
        lances: []
         }
        
},
mounted(){          
             axios
                .post('/tesvue')
                .then(response =>( this.lances=response.data))
 
      
},

updated: function () {
  setInterval(   
        axios
        .post('/tesvue')
        .then(response =>( 
                console.log(response),
                this.lances=response.data))
        
        ,5000)
} 

})

In the template if I put this code:

<div id="lancapp" >
   
   <p>{{ lances }}</p>

  </div>

With the code shown above, Vue returns the following correct data rendered in the wrong way:

[ { "id": 1, "lance": "R$ 25,00", "objeto": "teste 3", "realizadorselec": null, "ncurtidas": null, "statuslance": null, "modalrel": null, "datacriacao": null, "createdAt": "2021-03-11T14:49:18.000Z", "updatedAt": "2021-03-11T14:49:18.000Z", "idusuariolancador": 1 }, { "id": 2, "lance": "R$ 200,00", "objeto": "teste 4", "realizadorselec": null, "ncurtidas": null, "statuslance": null, "modalrel": null, "datacriacao": null, "createdAt": "2021-03-11T14:49:39.000Z", "updatedAt": "2021-03-11T14:49:39.000Z", "idusuariolancador": 1 } ]

Each user places a bid wanting to obtain an object and these bids have to be rendered dynamically with Vue in the form of a list, but I am not able to do this. Can someone help me to discover the problem?

Below are some of the attempts I have already made:

Tentativa 1:

<div id="lancapp" v-for="item of lances" >
   
   <p>{{item.lance}}</p>
   <p>{{item.vontade}}</p>

  </div>

Tentativa 2:

<div id="lancapp" v-for="item of lances" :key="item.id">
   
   <p>{{item.lance}}</p>
   <p>{{item.vontade}}</p>

  </div>

Tentativa 3:

<div id="lancapp" v-for="item of lances['data']" >
   
   <p>{{item.lance}}</p>
   <p>{{item.vontade}}</p>

  </div>

Tentativa 4:

 <div id="lancapp" v-for="{item, id} of lances" :key="item.id">
   
   <p>{{item.lance}}</p>
   <p>{{item.vontade}}</p>

  </div>

As the data renders in the form of a simple variable, I only tried the template. I thank you in advance if anyone can help.

could you edit your question title and translate it to english? — Joseph
– Joseph, Commented Mar 13, 2021 at 14:46

gaidyjg · Accepted Answer · 2021-03-13 17:21:33Z

1

You must render in another div. You are trying to render on the mount point of the Vue instance.

new Vue({
  el: "#app",
  data: {
    items: []
  },
  mounted() {
    fetch('https://rickandmortyapi.com/api/character/?page=1')
      .then(res => res.json())
      .then(res => {
        this.items = res.results
       })
      .catch(err => console.error(err))
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
 <div v-for="(item, key) in items" :key="key">
  <p> - {{ item.id }} : {{ item.name }} | {{ item.status }} | {{ item.species }} </p>
 </div>
</div>

If you try to render on the Vue instance itself you will get errors.

answered Mar 13, 2021 at 17:21

gaidyjg

3011 gold badge2 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

How do I solve this problem when rendering a list with Vue and Axios?

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