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 >
<div >
<div >
<div >
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
id="main-image"
/>
<div >
<div >
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
/>
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
/>
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
/>
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
/>
</div>
</div>
</div>
</div>
</div>
<div >
<h4>{{sub_brand}}</h4>
<!-- <input type="text" name="" id="" v-model="sub_brand"> -->
<h5>Star</h5>
<div style="padding: 10px 0px">
<h2 >RM869.00</h2>
</div>
<div >
<h3>Variation</h3>
</div>
<div style="padding: 10px 0px">
<h5 >Quantity: </h5>
<input type="number" placeholder="0" style="width: 12%; margin-left: 4%" min="0">
</div>
<div >
<button >Add to Cart</button>
<button >Buy Now</button>
</div>
<hr >
</div>
<div >
<div >
<h3><strong>Samsung</strong></h3>
</div>
<div >
<a href="">Chat</a>
<a href="" >Video Chat</a>
<a href="" >View</a>
</div>
<hr>
<div >
<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 >
<h5>Authentic</h5>
<br>
<h5>15 Days Return</h5>
<br>
<h5>Free Shipping</h5>
</div>
<br><br>
</div>
</div>
<div >
<div >
<div >
<h4>Product Description</h4>
</div>
<div >
Samsung
</div>
</div>
</div>
<div >
<div >
<div >
<h4>Review</h4>
</div>
<div >
Samsung
</div>
</div>
</div>
<div >
<div >
<div >
<h4>You may also like other product from same merchant</h4>
</div>
<div >
Samsung
</div>
</div>
</div>
<div >
<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>
CodePudding user response：
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);
},
},
CodePudding user response：
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.
asyncmakes a function return a Promiseawaitmakes 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;
}