vue js data（）中的字段未通过second（help）函数的呼叫来初始化

发布于 2025-02-08 12:52:55 字数 853 浏览 2 评论 0原文

我几乎没有Vue JS的经验。

我有2个函数loadComponentsofuser（）和loaduserid（），因此LoadComponentsofuser（）使用UserID字段，必须由LoadUserID（）函数加载。

data() {
  return { 
    userId: ''
  }
},

created() {
  this.loadComponentsOfUser()
},

methods(): {
   loadUserId() {
       axios.get('getUserId').then(res => {
            this.userId = res.data
        }).catch(() => {
            ...
            })
        });
     },
     loadComponentsOfUser() {
         this.loadUserId()
         axios.get('users/' + this.userId).then(res => {
         }).catch(() => {
             ...
             })
         });
}

loadUserId（）函数正常工作并从服务器加载正确的值

，但是当调用LoadComponentSofuser（）时，This.userid字段看起来似乎尚未初始化，并且一个空字段出现在AXIOS上。

我的问题是，为什么在调用LoadUserId（）之后没有初始化该字段？

原文

I don't have almost any experience with vue js.

I have 2 functions loadComponentsOfUser() and loadUserId(), so that loadComponentsOfUser() uses the userID field, which must be loaded by the loadUserId() function.

data() {
  return { 
    userId: ''
  }
},

created() {
  this.loadComponentsOfUser()
},

methods(): {
   loadUserId() {
       axios.get('getUserId').then(res => {
            this.userId = res.data
        }).catch(() => {
            ...
            })
        });
     },
     loadComponentsOfUser() {
         this.loadUserId()
         axios.get('users/' + this.userId).then(res => {
         }).catch(() => {
             ...
             })
         });
}

The loadUserId() function works correctly and loads the correct value from the server

But when loadComponentsOfUser() is called, the this.userId field looks like it has not been initialized and an empty field comes to the axios.

my question is why the field was not initialized after calling loadUserId()?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青芜 2025-02-15 12:52:55

您需要等待响应，您可以使用async和等待：

new Vue({
  el: '#demo',
  data() {
    return { 
      id: 1,
      userId: '',
      user: null
    }
  },
  created() {
    this.loadComponentsOfUser()
  },
  methods: {
    async loadUserId() {
       await axios.get('https://jsonplaceholder.typicode.com/users/' + this.id)
         .then((res) => {
           this.userId = res.data.id
         })
         .catch(() => {})
    },
    async loadComponentsOfUser() {
      await this.loadUserId()
      if(this.userId) {
        axios.get('https://jsonplaceholder.typicode.com/users/' + this.userId)
          .then(res => {
            this.user = res.data
          })
          .catch(() => {})
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js" integrity="sha512-odNmoc1XJy5x1TMVMdC7EMs3IVdItLPlCeL5vSUPN2llYKMJ2eByTTAIiiuqLg+GdNr9hF6z81p27DArRFKT7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="demo">
  <input type="number" v-model="id" /><button @click="loadComponentsOfUser">load</button>
  {{ user }}
</div>

You need to wait for responses, yo can use async and await:

new Vue({
  el: '#demo',
  data() {
    return { 
      id: 1,
      userId: '',
      user: null
    }
  },
  created() {
    this.loadComponentsOfUser()
  },
  methods: {
    async loadUserId() {
       await axios.get('https://jsonplaceholder.typicode.com/users/' + this.id)
         .then((res) => {
           this.userId = res.data.id
         })
         .catch(() => {})
    },
    async loadComponentsOfUser() {
      await this.loadUserId()
      if(this.userId) {
        axios.get('https://jsonplaceholder.typicode.com/users/' + this.userId)
          .then(res => {
            this.user = res.data
          })
          .catch(() => {})
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js" integrity="sha512-odNmoc1XJy5x1TMVMdC7EMs3IVdItLPlCeL5vSUPN2llYKMJ2eByTTAIiiuqLg+GdNr9hF6z81p27DArRFKT7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="demo">
  <input type="number" v-model="id" /><button @click="loadComponentsOfUser">load</button>
  {{ user }}
</div>

回复收藏 0 原文

~没有更多了~