couldn't passing the data from axios to data return variable in vuejs - vue.js

Question

I have an issue in my vue template down below. I fetched data from axios but it couldn't store the data on this.sub_brand variable. console.log(this.sub_brand) is only working for inside axios. here is the full code -
<template>
<div>
<div class="row" >
<div class="col-md-4 pt-5 pl-5">
<div class="product">
<div class="product__images">
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
class="product__main-image"
id="main-image"
/>
<div class="product__slider-wrap">
<div class="product__slider">
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
class="product__image product__image--active"
/>
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
class="product__image"
/>
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
class="product__image"
/>
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
class="product__image"
/>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5 pt-5 pr-5">
<h4>{{sub_brand}}</h4>
<!-- <input type="text" class="form-control" name="" id="" v-model="sub_brand"> -->
<h5>Star</h5>
<div class="bg-light mt-4" style="padding: 10px 0px">
<h2 class="pl-4 pt-3">RM869.00</h2>
</div>
<div class="mt-4">
<h3>Variation</h3>
</div>
<div class="bg-light mt-4" style="padding: 10px 0px">
<h5 class="pl-4">Quantity: </h5>
<input type="number" class="form-control pl-4" placeholder="0" style="width: 12%; margin-left: 4%" min="0">
</div>
<div class="row mt-5">
<button class="btn btn-secondary ml-3">Add to Cart</button>
<button class="btn btn-primary ml-3">Buy Now</button>
</div>
<hr class="mt-5">
</div>
<div class="col-md-3 bg-light">
<div class="pl-5">
<h3><strong>Samsung</strong></h3>
</div>
<div class="pl-5 custom_pan">
Chat
Video Chat
View
</div>
<hr>
<div class="pl-5 mt-4 pr-4">
<strong>Shipping Details</strong>
<p style="color: #D1D3D4">2A, Changkat Duta Kiara, Mont Kiara, 50480 Kuala Lumpur, Willayah Persekutuan Kuala Lumpur</p>
<strong>From: China Logistic, Shankal</strong>
<br><br>
<strong>To: Kuala Lumpur, Willayah Persekutuan</strong>
<br><br>
<strong>Shipping Fee: RM8.00</strong>
</div>
<hr>
<div class="pl-5 mt-5">
<h5>Authentic</h5>
<br>
<h5>15 Days Return</h5>
<br>
<h5>Free Shipping</h5>
</div>
<br><br>
</div>
</div>
<div class="row bg-light">
<div class="card">
<div class="card-header">
<h4>Product Description</h4>
</div>
<div class="card-body">
Samsung
</div>
</div>
</div>
<div class="row bg-light">
<div class="card">
<div class="card-header">
<h4>Review</h4>
</div>
<div class="card-body">
Samsung
</div>
</div>
</div>
<div class="row bg-light">
<div class="card">
<div class="card-header">
<h4>You may also like other product from same merchant</h4>
</div>
<div class="card-body">
Samsung
</div>
</div>
</div>
<div class="row bg-light">
<br><br>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
mounted() {
// console.log('Component mounted.');
this.fetchProduct();
},
data() {
return{
single_product: [],
sub_brand: "",
product_id: 6,
}
},
methods: {
fetchProduct(){
axios.get('https://admin.globalshopping-mall.site/api/single_sub_brand_detail/'+ this.product_id)
.then(res => {
this.single_product = res.data.data[0];
this.sub_brand = res.data.data[0].GUID;
}).catch(err => {console.log(err);});
},
},
}
</script>
<style>
.card{
margin-top: 2%;
margin-left: 4%;
background-color: white;
width: 71%;
/* height: 30%; */
}
.card-header{
background-color: white
}
.product {
width: 100%;
height: 68%;
}
.product__images {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.product__main-image {
max-width: 500px;
max-height: 600px;
object-fit: cover;
cursor: pointer;
border: 1px solid #070707;
}
.product__slider-wrap {
max-width: 500px;
min-height: 100px;
display: flex;
align-items: center;
}
.product__slider {
width: 98%;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding-left: 2%;
}
.product__image {
max-width: 180px;
max-height: 100px;
object-fit: cover;
cursor: pointer;
opacity: 0.5;
margin: 0.25rem;
border: 1px solid #070707;
}
.product__image:first-child {
margin-left: 0;
}
.product__image:last-child {
margin-right: 0;
}
.product__image:hover {
opacity: 1;
}
.product__image--active {
opacity: 1;
}
.product__slider::-webkit-scrollbar {
height: 10px;
}
.product__slider::-webkit-scrollbar-thumb {
background-color: #D1AD33;
border-radius: 50px;
}
</style>

Answer 1

Look, the problem is, your context this. works inside axios with context of axios
If you want to use context this. of vue component, you have to get data from axios outside.
You have to use async/await for you vue method fetchProduct
Something like that
methods: {
async fetchProduct() {
let result = await axios.get("https://admin.globalshopping-mall.site/api/single_sub_brand_detail/" +this.product_id)
.then((res) => {
return res.data.data[0];
})
.catch((err) => {console.log(err);});
this.single_product = result;
this.sub_brand = result.GUID;
},
},
or
You can save your context this to the variable before axios
and use this variable inside the axios function
Something like this
methods: {
fetchProduct() {
let _this = this;
axios.get("https://admin.globalshopping-mall.site/api/single_sub_brand_detail/" + this.product_id)
.then((res) => {
_this.single_product = res.data.data[0];
_this.sub_brand = res.data.data[0].GUID;
})
.catch((err) => {console.log(err);});
console.log(this);
},
},

Answer 2

Root cause : As axios API calls works asynchronously, But other code will execute synchronously. Hence, While trying to logging this.sub_brand it will work synchronously and will invoke before the axios call (response time might vary).
Solution : If you want to access the API response immediately after a call. You have to use async/await which make promises easier to write.
async makes a function return a Promise
await makes a function wait for a Promise
Live Demo :
methods: {
async fetchProduct(){
const res = await axios.get('https://admin.globalshopping-mall.site/api/single_sub_brand_detail/'+ this.product_id)
.then(res => {
return res.data.data[0];
}).catch(err => {console.log(err);});
}
this.single_product = res;
this.sub_brand = res.GUID;
}