Vue JS根据另一种方法的输出唯一ID触发一种方法 [英] Vue JS fire a method based on another method's output unique ID

问题描述

我正在尝试呈现注释列表，并且我希望在该列表中基于存储在注释表中的user_id包括注释的用户名.我有类似的内容，但此刻它正在记录一条错误消息，指出 无法读取未定义的属性'user_id' ，这是为什么.

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 Cannot read property 'user_id' of undefined, which I get why.

我的问题是，在Vue中如何执行这样的事情?

My question is, in Vue how can something like this be executed?

模板:

<div v-for="note in notes">
   <h2>{{note.title}}</h2>
   <em>{{user.name}}</em>
</div>

脚本:

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( () => {
      this.fetchUser(this.note.user_id);
   });
}

---

更新:

---

UPDATE:

我修改了代码，使其看起来像下面的示例，并且得到了更好的结果，但还不是100％.有了这段代码，它在第一次呈现视图时就可以工作，如果我在该组件外部导航然后再返回，那么它将失败...如果刷新页面，同样的事情.

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.

我得到的错误是: [Vue警告]:渲染错误:"TypeError:无法读取未定义的属性'user_name'"

请注意console.log ...它每次都会返回预期的对象，但是正如我提到的如果刷新页面或浏览过去然后再返回此组件，我会得到错误以及正确的日志.

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.

模板:

<div v-for="note in notes">
   <h2>{{note.title}}</h2>
   <em>{{note.user.user_name}}</em>
</div>

脚本:

methods:{
   fetchNotes(id){
      return this.$http.get('http://api/notes/' + id )
      .then(function(response){
         this.notes = response.body;

          for( let i = 0; i < 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);
              });
          }

      });
   },
}

推荐答案

Tony， 谢谢您的所有帮助和努力！最终，在Vue论坛中某人的帮助下，这对我有用.另外，我想学习如何在fetchNotes方法中除了用户之外添加其他http请求-在此示例中还包括图像请求.这对我有用.

Tony, Thank you for all your help and effort dude! Ultimately, with the help from someone in the Vue forum, this worked for me. In addition I wanted to learn how to add additional http requests besides the just the user in the fetchNotes method - in this example also the image request. And this works for me.

模板:

<div v-if="notes.length > 0">
   <div v-if="loaded === true">
    <div v-for="note in notes">
        <h2>{{note.title}}</h2>
        <em>{{note.user.user_name}}</em>
        <img :src="note.image.url" />
      </div>
    </div>
   <div v-else>Something....</div>
</div>
<div v-else>Something....</div>

脚本:

name: 'invoices',
data () {
   return {
      invoices: [],
      loaded: false,
   }
},
methods: {
fetchNotes: async function (id){
    try{
        let notes = (await this.$http.get('http://api/notes/' + id )).body
        for (let i = 0; notes.length; i++) {
            notes[i].user = (await this.$http.get('http://api/user/' + notes[i].user_id)).body
            notes[i].image = (await this.$http.get('http://api/image/' + notes[i].image_id)).body
        }
        this.notes = this.notes.concat(notes)
    }catch (error) {

    }finally{
       this.loaded = true;
    }
} 

这篇关于Vue JS根据另一种方法的输出唯一ID触发一种方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！