Unable to transfer the information from axios to the data return variable in Vue.js

Question

Unable to transfer the information from axios to the data return variable in Vue.js

Having a problem with my Vue template below. I used axios to fetch data but couldn't save it in the this.sub_brand variable. The console.log(this.sub_brand) only works within axios. Here is the complete 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">
                <a href="">Chat</a>
                <a href="" class="pl-3">Video Chat</a>
                <a href="" class="pl-3">View</a>
            </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 products from the 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>

vue.js vuejs2 axios this

Answer 1

Answer №1

It seems like the issue lies in how your context this. is functioning within axios, as it only works with the context of axios itself. If you wish to access the context this. of the Vue component, you'll need to retrieve the data from axios externally. To achieve this, utilizing async/await in your vue method fetchProduct is necessary. Below is an example:

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;
    },
  },

Alternatively, you can store your context this in a variable before calling axios and then use that variable within the axios function. Here's an example:

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

It seems like the issue lies in how your context this. is functioning within axios, as it only works with the context of axios itself. If you wish to access the context this. of the Vue component, you'll need to retrieve the data from axios externally. To achieve this, utilizing async/await in your vue method fetchProduct is necessary. Below is an example:

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;
    },
  },

Alternatively, you can store your context this in a variable before calling axios and then use that variable within the axios function. Here's an example:

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 3

Answer №2

Main cause : Due to the asynchronous nature of axios API calls, there is a discrepancy in timing with other synchronous code execution. This results in logging this.sub_brand synchronously before the axios call completion.

Solution : To access the API response immediately after making a call, utilize async/await functionality for simplified promise handling.

async ensures a function returns a Promise
await allows a function to pause until a Promise resolves

Check out this Live Demo for implementation:

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;         
}

Answer 4

Main cause : Due to the asynchronous nature of axios API calls, there is a discrepancy in timing with other synchronous code execution. This results in logging this.sub_brand synchronously before the axios call completion.

Solution : To access the API response immediately after making a call, utilize async/await functionality for simplified promise handling.

async ensures a function returns a Promise
await allows a function to pause until a Promise resolves

Check out this Live Demo for implementation:

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;         
}

Unable to transfer the information from axios to the data return variable in Vue.js

Answer №1

Answer №2

Similar questions

Closing a Vue modal with a button

The ongoing saga of `npm run dev` seems to have no end in sight

Tips for overcoming indentation issues using ESLint?

A more concise approach to crafting ajax requests

Prevent user input in Vue.js until the value has been modified

Attempting to download an image through an axios fetch call

Is it possible to transition my Vue.js web application to NativeScript-Vue?

JavaScript - The progression of a virtual pet even when the user is offline

What is the method for accessing a map that has been set in a separate component?

Vue.js: Issue with dynamically calculating class property

What is the most effective method for daily column reset with a large user base?

Execute a function as soon as an AJAX request is made

When I download the image/file, I am receiving encoded data

Mastering the use of v-if and v-else in Vue JS for <td> table elements

Configuring properties of a child component in VueJS

Laravel's Vue component is experiencing issues with loading Axios response data

Mastering data extraction from JSON using React JS (with Axios)

Tips for implementing a shape divider in vuetify.js

Guide to building a personalized autocomplete feature in vue js

What is the best way to adjust the dimensions of a textfield in Vuetify by altering its width and height?