将数据从 JS 变量解析到 Vue 实例

Question

我是 VueJS 新手，有一个非常基本的问题。如果我有一个 JS 变量并想将其解析为 Vue 实例数据部分，该怎么做？在下面的简单示例中，我想将变量“parsedJSON”解析为名为“test”的变量的数据部分下的 Vue 实例“mainVue”：

let parsedJSON = fetch(url)
    .then(function(response){
        return response.json();
    }).then(function (data){
        console.log(data)
});

let mainVue = new Vue({
    el: '#mainContent',
    data: {
        test: ""
    }
})

在我的整个代码中，“parsedJSON”变量由来自 mongoDB 的 JSON 数据组成，可以很好地获取，但我似乎找不到将其解析到我的 Vue 实例中的方法。正确的数据显示在控制台中。

Answer 1

你试过这样设置吗？

    data: {
        test: parsedJSON
    }

Answer 2

试试这个，在实例中获取：

let mainVue = new Vue({
  el: '#mainContent',
  data: function() {
    return {
        test: {}
    }
  },
  created() {
    fetch('...').then(function(response) {
      return response.json();
    }).then(function(data) {
      this.test = data;
    }.bind(this))
  }
})

或者更整洁一点

let mainVue = new Vue({
  el: '#mainContent',
  data: () => ({
    test: {}
  }),
  async created() {
    this.test = await fetch('...').then(res => res.json())
  }
})