Javascript 在加载Vue实例之前加载HTML

我正在使用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> 

$（文档）。在（'click'，'btn_print'，函数（）上{
var app3=新的Vue({
el:'附录3'，
数据：{
打印订单：[]
},            
挂载：函数（）{
这个
},            
方法：{
条例草案(){
axios.get(`https://staging/wp-json/wc/v3/orders/137? 
消费者密钥=ck\u 123&消费者密钥=cs\u 456`）
。然后（响应=>{
this.printOrders=response.data；
控制台日志（响应）；
})
.catch（错误=>{
console.log（错误）；
});
}
}
});
}

这是我的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>

名称
地址和手机
id:{{orders.number}

{{orders.date_created}}

{{orders.billing.first_name+“”+orders.billing.last_name}

总计：{orders.Total}
方法：{{orders.payment{u Method{u title}

错误

Vue warn]：呈现错误：“TypeError:无法读取未定义的属性'first_name'”
vue.js:1897 TypeError:无法读取未定义的属性“first_name”
在eval（在createFunction（vue.js:11649）中进行eval）

将
装载的
生命周期更改为
创建的
，如下所示：

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

加载页面时不会调用
挂载的
挂钩，因此不会设置数据道具：

服务器端渲染期间不调用此挂钩

我非常怀疑您的
账单
属性是否始终有定义，但如果您这样说，以下内容应该能够解决您的问题：

<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>

id:{{orders.number}

{{订单.创建日期}


{{orders.billing.first_name+“”+orders.billing.last_name}

你能不能也包括完整的错误堆栈跟踪？嗨@Dipen Shah，我刚刚附加了一个问题的错误看起来
账单
属性在订单上是空的，你能验证它吗？不，我验证了，实际上我用我定义的每个元素填充了JSON数据……我怀疑，你能包括
打印订单吗JSON对象？谢谢你的回答。但我仍然得到了“未定义属性”的错误。@Tom根据堆栈跟踪，看起来有些订单可能没有获得
账单
道具或将其作为
null
获取。试着在打印之前添加验证以检查null。
{{orders.billing？orders.billing.first_name+“”+orders.billing.last_name:'-'}
出于测试目的，我只得到了一个顺序，对于这个顺序，我还得到了名字和其他元素……Hi@Dipen Shah，谢谢你的回答。我得到了这个顺序的JSON数据，我可以在控制台中查看。但是，正如你所说，当我使用v-if时，我得到了嵌套数组的另一个未定义属性。我认为我在使用Vue实例时做错了什么。我想问一个问题，我们可以正确使用多个Vue实例。这是我处理此特定Get请求的第三个Vue实例。@Tom我不确定多个Vue实例是什么意思，多个Vue组件肯定是受支持的。如果您可以共享codesandbox/stac，可能是kblitz我可以提供进一步的帮助。我通过Axios请求以同样的方式填写了同一页面中的其他表格。仅此部分，我遇到了这个问题……我看到了，但没有查看数据，我不确定我能帮到什么忙，因为问题似乎是属性值未定义，可能是您可以调试JS并查看问题所在。
<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>