.vue 单文件组件,fetch异步怎么更新视图数据? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

.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 2435 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
    赞同 展开评论 打赏
问答排行榜
最热
最新
相关电子书
更多
23-Vue.js在前端...1506518547.pdf
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多