Question

我想编写一个简单的应用程序，该应用程序从服务器获取数据，计算结果并显示它。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<body>

<div id="app">
  <p>{{ my_data }}</p>
  <div> computed value: {{myvalue}} </div>  <!-- I need to get access to myvalue from computed --> 

</div>

</body>

<script>
    var app = new Vue({
  el: '#app',
  data: {
    my_data: {},
    mess: 'hello world'
  },
    computed: {
      myvalue: function () {
            return Number(this.my_data['2018-07-10']['april']) + Number(this.my_data['2018-07-10']['may'])
      }
    },

     created: async function(){
        url = 'http://dlang.ru/test'
        const response = await fetch(url);
        this.my_data = await response.json();
    }   
})

</script>
</html>

页面显示：

{ "2018-07-10": { "may": 9, "april": 10 } }

computed value: 19

但是在控制台中，我收到错误消息：Error in render: "TypeError: Cannot read property 'april' of undefined"

如果我正确理解，它正在尝试在服务器返回数据之前计算胡子{{my_data}}并进行计算将对其进行计算。

防止此错误的正确方法是什么？

Answer 1

您已正确理解问题，由于异步创建了生命周期挂钩，因此代码中出现了竞争状况，您可以采用两种方法来解决此问题：

在初始化Vue应用之前获取数据，然后将其作为道具传递给Vue应用或
在尝试使用“ my_data”属性之前，请先在您的计算属性中为其填充数据。

使用从提取的数据中计算得出的计算数据的正确方法是什么？

1 个答案: