VueJS fetch promises

Question

I have a component:

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

I want to print in p tag props content which is the result of created function

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

But this is only returning a promise which I can not work with.

Promise {<pending>}

Promise has this content:

{ '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 } }

I have to display in p tag the from and subject attributes of each.

I gave this question a negative point. The reason is that as its name implies it is a promise and may not have the value. A simple search on promise could explain this very well. Worse is that this post sits top when you search for fetch or promise and wastes everyone's time. — Siavoshkc
– Siavoshkc, Commented Oct 28, 2021 at 16:10

farincz · Accepted Answer · 2020-05-28 08:33:21Z

1

First, don't forget to register userInbox in your data. Second, assign it in promise callback

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

answered May 28, 2020 at 8:33

farincz

5,2031 gold badge33 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS fetch promises

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related