CODEWITHSUNDEEP
ajaxvue.jsrenderv-forajax-polling
Shiyu Lu
Shiyu Lu

Reputation: 1

v-for render after AJAX request

I have a main page containing a component called single-contact as below:

<el-row id="rowContact">
  <!-- Contacts -->
  <el-scrollbar wrap-class="list" :native="false">
    <single-contact ref="singleContact"></single-contact>
  </el-scrollbar>
</el-row>

And I want to dynamically render this component after AJAX polling, so in SingleContact.vue I use $axios and mounted() to request the data from the backend. And I want to render the component using v-for. I have my code as:

<template>
  <div :key="componentKey">
    <el-row id="card"  v-for="contact in contacts" :key="contact.convUsername">
      <div id="avatar" ><el-avatar icon="el-icon-user-solid"></el-avatar></div>
      <h5 id='name' v-if="contact">{{contact.convUsername}}</h5>
      <div id='btnDel'><el-button size="medium" type="danger" icon="el-icon-delete" v-on:click="delContact(contact.convUsername)"></el-button></div>
    </el-row>
  </div>
</template>

And the data structure is:

data() {
  return {
    timer: null,
    contacts: []
  }

And the method of Ajax polling is:

loadContacts () {
    var _this = this
    console.log('loading contacts')
    console.log(localStorage.getItem('username'))

    this.$axios.post('/msglist',{
      ownerUsername: localStorage.getItem('username')
    }).then(resp => {
      console.log('success')
      var json = JSON.stringify(resp.data);
      _this.contacts = JSON.parse(json);
      console.log(json);
      console.log(_this.contacts[0].convUserName);
      // }
    }).catch(failResponse => {
      console.log(failResponse)
    })
  }

This is what I get in the console: Console Result And the mounted method I compute is as:

beforeMount() {
  var self = this
  this.$axios.post('/msglist',{
    ownerUsername: localStorage.getItem('username')
  }).then(resp => {
    this.$nextTick(() => {
      self.contacts = resp.data
    })
  }).catch(failResponse => {
    console.log(failResponse)
  })
},
mounted() {
  this.timer = setInterval(this.loadContacts(), 1000)
  this.$nextTick(function () {
        this.loadContacts()
  })
},
beforeDestroy() {
  clearInterval(this.timer)
  this.timer = null
}

I can get the correct data in the console. It seems that the backend can correctly send json to the front, and the front can also receive the right result. But the page just doesn't render as expected.

Any advice would be great! Thank you in advance!

Upvotes: 0

Views: 544

Answers (0)

Related Questions