Блог

Я использую Axios для извлечения JSON из внешнего API и создания шаблона счета в HTML. Мои другие части запроса работают нормально. Но в этой части Vue выдает ошибку, что «свойство не определено». Я попытался перенести html-код между тегом script, а также попытался 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_123amp;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)
          
  

Пожалуйста, любая помощь…..

Я очень сомневаюсь, что ваше 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>
  

Измените mounted жизненный created цикл следующим образом:

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

mounted Перехват не вызывается при загрузке страницы, поэтому реквизиты данных не будут установлены: https://v3.vuejs.org/api/options-lifecycle-hooks.html#mounted

Этот перехват не вызывается во время рендеринга на стороне сервера.