vue.js - Vue is not Firing on Json Update for the second time

Question

I am new to Vue.js. Here I am trying to implement rendering of some JSON objects returning from my Restful api. When I call allListing(streamid) from some control, I need to render changed JSON that is received from the API. After spending whole day, I thought of asking here.

Thanks in advance.

callListing(1);

function callListing(streamid) {
  var vm = new Vue({
    el: '#app',
    data() {
      return {
        info: []

      }
    },
    created() {
      axios
        .get('https://localhost:44367/api/listing_institution/byselector/t/' + streamid + '/1')
        .then(response => {
          this.info = response.data,
            console.log(response);

        })
    }
  })
}

function fireListing(streamid) {
  callListing(streamid);
}

<div id="app">
  <div v-for="dt in info">
    {{dt}}
  </div>
</div>

question from:https://stackoverflow.com/questions/65878719/vue-is-not-firing-on-json-update-for-the-second-time

Answer 1

You should use Vue.set to make your data reactive.

Vue.set is a tool that allows us to add a new property to an already reactive object. Read more about Vue.set here.

So, you need to do very few fixes to your code.

Instead of-

this.info = response.data,

Do like-

Vue.set(this.info, 0, response.data);

// It takes three params-
//   1. The element inside which we want to update
//   2. The index where we want to put updated response.
//   3. Response

You can check out this example for reference- CodeSandBox example