vue在created异步请求数据,通过v-for渲染;在mounted中获取不到数据和Dom的解决方案

问题:

// template

<div
  class="scheme-tab"
  v-for="(tab,index) in tabs"
  :key="tab.id"
>

// JS

async created() {
  this.tabs = await this.fetchSolutionTypes();
  console.log(JSON.stringify(this.tabs)); // 有数据
},
mounted() {
  console.log(JSON.stringify(this.tabs)); // 没有数据
  console.log(document.getElementsByClassName("scheme-tab")); // 没有数据
}

目的:在created中异步获取到数据后,在template中通过v-for渲染;然后在mounted中获取到循环渲染的Dom节点。

但是在mounted中都获取不到;

在mounted当中使用  this.$nextTick  也不好用;

使用setTimeout,设置延时可以,但是在网速不好的情况下还是有问题。所以不推荐;

解决方法:

在watch当中监听tabs数组,然后在watch函数中,通过nextTick获取Dom节点;

watch: {
    tabs: function (val) {
      console.log(val); // 有数据
      this.$nextTick(() => {
        let curDom = document.getElementsByClassName("scheme-tab")[0]; // 有数据
      });
    }
},
async created() {
  this.tabs = await this.fetchSolutionTypes();
  console.log(JSON.stringify(this.tabs)); // 有数据
},
mounted() {
  // console.log(JSON.stringify(this.tabs));
  // console.log(document.getElementsByClassName("scheme-tab")); 
}

 

  • 6
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
### 回答1: 在 Vue.js created 钩子函数在实例创建之后立即调用。这意味着在 created 钩子函数进行的数据请求可能还没有完成。mounted 钩子函数在挂载完成之后调用,此时已经渲染完成,因此如果在 mounted 访问数据请求的结果,可能会得到 "undefined" 的值。 为了解决这个问题,你可以在数据请求完成之后再调用 mounted 钩子函数,或者将数据请求的代码放在 mounted 钩子函数进行。 例如,你可以使用 Promise.then 方法来等待数据请求完成: ``` created() { this.fetchData().then(() => { // 数据请求完成 }); }, mounted() { // 数据请求已经完成,可以访问数据了 }, methods: { fetchData() { return axios.get('/api/data').then((response) => { this.data = response.data; }); } } ``` 或者你也可以将数据请求的代码放在 mounted 钩子函数: ``` mounted() { this.fetchData(); }, methods: { fetchData() { axios.get('/api/data').then((response) => { this.data = response.data; }); } } ``` ### 回答2: 在Vuecreated和mounted是两个生命周期钩子函数。created在组件实例被创建之后立即调用,此时组件的DOM还未被挂载,而mounted在组件的DOM被挂载后调用。如果在created钩子请求数据,并在mounted使用这些数据,有可能会出现数据为undefined的情况。 这是因为在created钩子请求数据时,请求的过程是异步的,数据还未返回就已经进入到了mounted钩子。因此,在mounted钩子访问数据时,数据还未被赋值,所以会显示为undefine。 要解决这个问题,可以在created钩子使用Promise或async/await来确保数据已经返回后再进入到mounted钩子。 示例代码如下: created() { this.getData().then(data => { this.myData = data; }); }, methods: { async getData() { // 在这里进行数据请求,返回一个Promise对象 return axios.get('api/data') .then(response => response.data) .catch(error => { console.error(error); return null; }); } }, mounted() { // 此时会正确显示数据 console.log(this.myData); } 通过使用Promise或async/await,可以确保在mounted钩子访问数据时,数据已经被正确赋值,避免了数据为undefined的情况。 ### 回答3: 在Vuecreated和mounted是组件的两个生命周期钩子函数。 在created钩子函数,组件实例已经创建完成,但是DOM元素没有渲染出来。所以,在created钩子函数请求数据,是可以成功获取到的,但是在mounted钩子函数显示的时候可能会出现undefined。 造成这种情况的原因可能是请求数据需要一定的时间来获取,并且在mounted钩子函数可能会更早执行,导致数据没有获取到。 要解决这个问题,可以使用Vue的异步操作或者Promise对象。例如,可以使用axios库来发送异步请求数据,并且使用Promise对象来保证在获取数据之后再进行显示。 下面是一个示例代码: ```javascript // 在created钩子函数中发异步请求 created() { axios.get('example.com/api/data') .then(response => { // 获取数据后赋值给组件的data属性 this.data = response.data; }) .catch(error => { console.log(error); }); }, // 在mounted钩子函数显示数据 mounted() { // 使用Vue的$nextTick方法来保证数据已经渲染完毕 this.$nextTick(() => { console.log(this.data); // 这里的this.data应该是有值的 }); } ``` 通过使用异步操作和Promise对象,可以确保在mounted钩子函数获取到的数据不会是undefined

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值