HTML-код загружается до Вью экземпляр становится загружается
Я использую 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)
Любая помощь, пожалуйста.....
Ответы - HTML-код загружается до Вью экземпляр становится загружается / HTML is loading before Vue Instance is getting loaded
14.10.2020 02:43:10
Измените жизненный цикл mounted на created следующим образом:
async created(){
await this.printExtraBill()
}
Крючок mounted не вызывается при загрузке страницы, поэтому реквизит данных не будет установлен : https://v3.vuejs.org/api/options-lifecycle-hooks.html#mounted
Этот хук не вызывается во время рендеринга на стороне сервера.
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>