VueJS提取承诺

Question

我有一个组件：

Vue.component('mail-list', {
  props: ['userInbox'],
  template:
  `
  <div>
    <p>{{userInbox}}</p>
  </div>
  `
  });

我想以p标签道具内容打印，这是创建的函数的结果

let options = {
  el: "#app",
  data: {
    pollingId: null,
  },

  created: function() {

    let users = fetch('/inbox')
    .then(response => response.json())
    .then(aJson => {return (aJson)})
    this.userInbox = users
  }
}
let vm = new Vue(options);

但是这只是返回我无法使用的承诺。

Promise {<pending>}

Promise具有此内容：

{ '1':
   Mail {
     id: 1,
     from: '[email protected]',
     to: '[email protected]',
     subject: 'Hi Mar',
     body: 'This is a test from pep to mar',
     timestamp: 1590647288599 },
  '6':
   Mail {
     id: 6,
     from: '[email protected]',
     to: '[email protected]',
     subject: 'By Mar',
     body: 'This is a test from nil to mar',
     timestamp: 1590647288599 } }

我必须在p标签中显示每个的from和subject属性。

Answer 1

首先，请不要忘记在数据中注册userInbox。其次，在promise回调中分配它]

let options = {
  el: "#app",
  data: {
    pollingId: null,
    userInbox: ''
  },

  created: function() {

    let users = fetch('/inbox')
    .then(response => response.json())
    .then(aJson => {
      this.userInbox = aJson
    })

  }
}
let vm = new Vue(options);