javascript - .vue 单文件组件，fetch异步怎么更新视图数据？

Question

.vue 单文件代码 例如

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

  <p class="nsr-card" v-for="res in result">
    <img v-bind:src="res.img" alt="">
    <p>{{res.content}}</p>
    <p 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>
    </p>
  </p>

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

谢谢

Answer 1

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