Vue 第二次没有在 Json 更新上触发

Question

我是 Vue.js 的新手。在这里，我试图实现从我的 Restful api 返回的一些 JSON 对象的渲染。当我从某个控件调用 allListing(streamid) 时，我需要呈现从 API 接收到的更改后的 JSON。玩了一整天，想来这里问问。

提前致谢。

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>

Answer 1

你应该使用 Vue.set 来让你的数据反应。

Vue.set 是一个工具，它允许我们向已经反应的对象添加新属性。阅读更多关于 Vue.set here.

因此，您只需对代码进行很少的修复。

而不是-

this.info = response.data,

喜欢-

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

您可以查看此示例以供参考- CodeSandBox example