vue获取v-for异步数据dom的解决问题

解决“vue获取v-for异步数据dom的解决问题”的攻略可以分为以下几个步骤：

1. 在data中定义一个空数组，用于存储异步获取的数据。
2. 在mounted生命周期钩子函数中，调用异步接口获取数据，并将数据存储在定义好的空数组中。
3. 使用v-for指令遍历数组，并渲染到页面中。

具体示例如下：

1. 使用axios获取异步数据渲染列表

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data () {
    return {
      list: []
    }
  },
  mounted () {
    axios.get('/api/list').then(res => {
      this.list = res.data;
    });
  }
}
</script>

在上面的示例中，我们定义了一个空数组list，并且在mounted生命周期钩子函数中使用axios发起请求获取数据，然后将数据存储在list中。接着使用v-for指令遍历list，并将每一项数据渲染到页面中。由于请求是异步的，当页面渲染出来时，异步数据已经完成请求并存储在list数组中，会自动更新到页面中。

1. 使用Promise获取异步数据渲染列表

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getData().then(data => {
      this.list = data;
    });
  },
  methods: {
    getData() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([{id: 1, name: 'apple'}, {id: 2, name: 'banana'}, {id: 3, name: 'pear'}]);
        }, 2000);
      });
    }
  }
}
</script>

在上面的示例中，我们使用一个名为getData的方法获取异步数据，并返回一个Promise实例。在mounted生命周期钩子函数中，调用getData方法获取数据，并使用Promise的then方法将数据存储在list数组中。接着使用v-for指令遍历list，并将每一项数据渲染到页面中。由于使用了Promise，可以保证数据是在渲染之前已经获取到了，所以不需要额外的操作。

总结

在使用v-for指令渲染异步数据时，需要注意异步数据的获取时间，避免在渲染时异步数据还没返回导致页面上没有数据。可以使用axios、Promise等方式获取数据，使用Vue的生命周期钩子函数进行数据获取和页面渲染。