HTML-код загружается до Вью экземпляр становится загружается


HTML-код загружается до Вью экземпляр становится загружается

14.10.2020 02:31:20 Просмотров 39 Источник

Я использую 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_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)
          

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

JSON Data First part

JSON Data current Error part

У вопроса есть решение - Посмотреть?

Ответы - HTML-код загружается до Вью экземпляр становится загружается / HTML is loading before Vue Instance is getting loaded

Nikhil Joshi

14.10.2020 02:43:10

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

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

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

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

Dipen Shah

14.10.2020 02:57:27

Я очень сомневаюсь, что ваше свойство 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>
Помочь в развитии проекта:
Закрыть X