title: Vue JS fire a method based on another method's output unique ID
body: <p>I'm trying to render a list of notes and in that list I would like to include the note's user name based on the user_id stored in the note's table. I have something like this, but at the moment it is logging an error stating <strong><em>Cannot read property 'user_id' of undefined</em></strong>, which I get why. </p>
  
  <p>My question is, in Vue how can something like this be executed?</p>
  
  <p>Template:</p>
  
  <pre><code>&lt;div v-for="note in notes"&gt;
     &lt;h2&gt;{{note.title}}&lt;/h2&gt;
     &lt;em&gt;{{user.name}}&lt;/em&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Scripts:</p>
  
  <pre><code>methods:{
     fetchNotes(id){
        return this.$http.get('http://api/notes/' + id )
        .then(function(response){
           this.notes = response.body;
        });
     },
     fetchUser(id){
        return this.$http.get('http://api/user/' + id )
        .then(function(response){
           this.user = response.body;
        });
     }
  },
  created: function(){
     this.fetchNotes(this.$route.params.id)
     .then( () =&gt; {
        this.fetchUser(this.note.user_id);
     });
  }
  </code></pre>
  
  <hr>
  
  <p><strong><em>UPDATE:</em></strong></p>
  
  <p>I modified my code to look like the below example, and I'm getting better results, but not 100% yet. With this code, it works the first time it renders the view, if I navigate outside this component and then back in, it then fails...same thing if I refresh the page.</p>
  
  <p>The error I am getting is: <em>[Vue warn]: Error in render: "TypeError: Cannot read property 'user_name' of undefined"</em></p>
  
  <p>Notice the console.log... it the returns the object as expected every time, but as I mentioned if refresh the page or navigate past and then back to this component, I get the error plus the correct log.</p>
  
  <p>Template:</p>
  
  <pre><code>&lt;div v-for="note in notes"&gt;
     &lt;h2&gt;{{note.title}}&lt;/h2&gt;
     &lt;em&gt;{{note.user.user_name}}&lt;/em&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Scripts:</p>
  
  <pre><code>methods:{
     fetchNotes(id){
        return this.$http.get('http://api/notes/' + id )
        .then(function(response){
           this.notes = response.body;
  
            for( let i = 0; i &lt; response.body.length; i++ ) {
               let uId = response.body[i].user_id,
                   uNote = this.notes[i];
                this.$http.get('http://api/users/' + uId)
                .then(function(response){
                   uNote.user = response.body;
                   console.log(uNote);
                });
            }
  
        });
     },
  }
  </code></pre>