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

Vue 不会第二次触发 Json 更新

1 个答案: