javascript 从API Vue JS获取数据后如何检查渲染的视图

oogrdqng  于 2023-03-21  发布在  Java
关注(0)|答案(2)|浏览(114)

我在使用VUE JS从API获取数据时遇到问题,然后我想打印此页面。从API获取数据后,Elements没有完全渲染,页面中的空白数据弹出打印选项。它与setTimeout函数一起工作,但是它并没有完美地与我所有的客户端一起工作。如果我想与我所有的客户端完美地工作,我会设置一个很长的等待超时。这是一个糟糕的解决方案。

methods: {
            getData() {
                axios.get('/api/sale/receipt/' + this.$route.params.uuid).then((res) => {
                    this.sale = res.data
                    if(this.sale.customer == null) {
                        this.sale.customer = {}
                    }
                    
                    $('.main-loader').hide();
                    // setTimeout(function() {
                        window.print();
                        window.close();
                    // }, 2000);
                }).catch((res) => {

                });
            }
        },

因此,在元素rednerd打印选项将弹出.谢谢

jgovgodb

jgovgodb1#

下面是一个在Vue中使用$nextTick()的例子。
如果你直接使用window.print(),而不使用$nextTick(),那么你将无法在打印中获得文章列表,因为更新DOM需要时间。

const { createApp, ref } = Vue 

const App = {
  data() {
    return { 
      posts: [] 
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
          fetch('https://jsonplaceholder.typicode.com/posts')
              .then((response) => response.json())
              .then((data) => 
              {
                this.posts = data;
                this.$nextTick(() => {
                  window.print();
                });
              });
      }   
  }  
}

const app = createApp(App)
app.mount('#app')
#app { line-height: 1.75; }
[v-cloak] { display: none; }
<div id="app" v-cloak>
<div v-for="post in posts" :key="post.id">
  <label>Id:</label>{{post.id}}<br/>
  <label>Title:</label>{{post.title}}<br/>
  <label>Body:</label>{{post.body}}<br/>
  <hr/>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
ryoqjall

ryoqjall2#

现在我找到了我问题的答案。

methods: {
            async getData() {
                await axios.get('/api/sale/receipt/' + this.$route.params.uuid).then((res) => {
                    this.sale = res.data
                    if(this.sale.customer == null) {
                        this.sale.customer = {}
                    }
                    $('.main-loader').hide();
                    // setTimeout(function() {
                        // window.print();
                        // window.close();
                    // }, 2000);
                }).catch((res) => {

                });

                window.print();
                window.close();
            }
        },

我只是把async getData()加到我的函数里,再把await加到axios里,然后把window.print()移到axios外面,现在就可以了。

相关问题