javascript - .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>

谢谢

解决方案

<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>

这篇关于javascript - .vue 单文件组件，fetch异步怎么更新视图数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！