开发者社区> 问答> 正文

.vue 单文件组件,fetch异步怎么更新视图数据?

.vue 单文件代码 例如

<template>
<div class="content nsr-card-bg">

  <div class="nsr-card" v-for="res in result">
    <img v-bind:src="res.img" alt="">
    <p>{{res.content}}</p>
    <div class="nsr-card-user-info">
      <p>
        <img v-bind:src="res.avatar" alt="">
        <span>from</span>{{res.nickname}}
      </p>
      <p class="fa fa-map-marker">{{res.address}}</p>
    </div>
  </div>

</div>
  
</template>

<script>

  var data = [];
  
  fetch('/server.php')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    data = json;
    console.log(json);
  }).catch(function(ex) {
    console.log(ex);
  });

  module.exports={
    data:function () {
      return {
        result : data
      }
    }
  }
</script>

谢谢

展开
收起
杨冬芳 2016-06-22 15:22:29 2516 0
1 条回答
写回答
取消 提交回答
  • IT从业
    <script>
      module.exports= {
        data:function () {
          return {
            result: []
          };
        },
        ready() {
            var self = this;
            fetch('/server.php')
              .then(function(response) {
                return response.json()
              }).then(function(json) {
                self.result = json;
              }).catch(function(ex) {
                console.log(ex.stack);
              });
        }
      }
    </script>
    2019-07-17 19:45:38
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Vue.js 在前端服务化上的探索与实践 立即下载
利用编译将 Vue 组件转成 React 组件 立即下载
Vue.js在前端服务化上的实践与探索 立即下载