在加载 Vue 实例之前加载 HTML

Question

我正在使用 Axios 从外部 API 获取 JSON 并在 HTML 中创建账单模板。我的其他请求部分工作正常。但是这部分 Vue 抛出“属性未定义”的错误。 我尝试在脚本标记之间包装html代码，还尝试在页面加载之前使用windows.onload()函数触发我的脚本，但错误以这种方式向另一个方向抛出。

这是我的 Vue 代码

    <script>             
    $(document).on('click', '#btn_print', function(){ 
    var app3 = new Vue({
        el: '#app3',
        data: {
          printOrders: []
        },            
    mounted: function() {
        this. printExtraBill()
    },            
    methods: {          
        printExtraBill() {
            axios.get(`https://staging/wp-json/wc/v3/orders/137? 
        consumer_key=ck_123&consumer_secret=cs_456`)               
        .then(response => {
          this.printOrders = response.data;
          console.log(response);
          })
         .catch(error => {
         console.log(error);              
        });
    }
   }
 });
}
</script> 

这是我的 HTML 部分

    <div class ="container mt-5" id="app3">
      <div id="printToday" style="border:3px solid black">
          <h2 align="center">Name</h2>
          <h4 align="center">Address and Mobile</h4>
               
     <p v-for="orders, index in printOrders" id="getName">Id: {{orders.number}} <br> 
        {{orders.date_created}} <br>
        {{orders.billing.first_name + " " + orders.billing.last_name }}
     </p>
   <div>
     <h3 class="thick" v-for="(orders, index) in printOrders" id="total">
          Total : {{orders.total}} </br> Method : {{orders.payment_method_title}}</h3>

错误

Vue warn]: Error in render: "TypeError: Cannot read property 'first_name' of undefined"
vue.js:1897 TypeError: Cannot read property 'first_name' of undefined
    at eval (eval at createFunction (vue.js:11649), <anonymous>:3:568)
    at Proxy.renderList (vue.js:2658)
    at Proxy.eval (eval at createFunction (vue.js:11649), <anonymous>:3:359)
    at Vue._render (vue.js:3551)
    at Vue.updateComponent (vue.js:4067)
    at Watcher.get (vue.js:4478)
    at Watcher.run (vue.js:4553)
    at flushSchedulerQueue (vue.js:4311)
    at Array.<anonymous> (vue.js:1989)
    at flushCallbacks (vue.js:1915)
          

请帮忙.....

Answer 1

我非常怀疑您的 billing 属性是否始终被定义，但如果您这么说，以下应该能够解决您的问题：

<p v-for="orders, index in printOrders" id="getName">Id: {{orders.number}} <br> 
    {{orders.date_created}}
    <br />
    <span v-if="orders.billing">
        {{orders.billing.first_name + " " + orders.billing.last_name }}
    <span>
</p>

Answer 2

将mounted生命周期更改为created，如下所示：

async created(){
    await this.printExtraBill()
}

加载页面时不会调用mounted 挂钩，因此不会设置数据道具：https://v3.vuejs.org/api/options-lifecycle-hooks.html#mounted

在服务器端渲染期间不会调用此钩子。