Vue how to display response from backend API

Question

Sorry for such noob question but I'm a simply gave up. I've got below code which creates a POST request to the BE part of the app - user provides input (productCodes) and push submit button. That part works well, Vue sends request to BE but in the response FE should have received JSON with result: { id: 1234 }

How do I get this response and display it inside the app? I've got below:

imports.js

    const createProductsRequest = (self, products) => {
      const jwtToken = self.$store.state.idToken;
      const payload = JSON.stringify({ product_codes: products['product_codes'].split(',') })
    
      return axios
        .post(`/api/v1/imports/products/`, payload,{
          headers: {
            Authorization: `Bearer ${jwtToken}`,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          }
        })
        .then(response => response.data)
    };

export {
  createProductsRequest
};

sync_product.vue

<script>

import {
  createProductsRequest
} from '../../api/imports'

import ModalController from '../general/modal_controller'

export default {
  name: 'BackboneSyncProducts',
  data() {
    return {
      styleCodes: [],
    }
  },
  computed: {
    productsToSyncAmount () {
      return this.styleCodes.length
    },
  },
  methods: {
    async syncProducts() {
      let confirmationText = `Do you want to ${this.productsToSyncAmount} sync products?`

      if (this.productsToSyncAmount === 0) {
        ModalController.showToast('', 'Type product codes for sync first, please!', 'warning')
      }
      else if (await ModalController.showConfirmation('Confirmation', confirmationText)) {
        try {
          ModalController.showLoader()
          await createProductsRequest(this, this.styleCodes)
          const successMessage = `${this.productsToSyncAmount} products have been queued for sync`
          await ModalController.showToast('', successMessage)
        } catch (data) {
          const errorMessage = `Error occurred during queueing products to sync - `
          ModalController.showToast('', errorMessage + data?.message, 'error')
        } finally {
          this.styleCodes = []
          ModalController.hideLoader()
        }
      }
    },
  }
}
</script>

That's all what I have.

Namysh · Accepted Answer · 2022-05-18 09:48:25Z

1

Instead of calling your request without getting the return value:

await createProductsRequest(this, this.styleCodes)

You can get the return value which is the result of the request :

const data = await createProductsRequest(this, this.styleCodes)

By doing that, data must contain the result of the request, as you mentionned { id: 1234 }.

--

If you want to use this result in your component, you can create a reactive value in data()

data() {
  return {
    styleCodes: [],
    data: null
  }
},

And store the result like this :

this.data = await createProductsRequest(this, this.styleCodes)

With that you can display it in your template for example :

<template>
  <!-- There is a v-if because before doing the request, data is null -->
  <div v-if="data">{{ data.id }}</div>
</template>

edited May 18, 2022 at 9:48

answered May 18, 2022 at 9:37

Namysh

4,8072 gold badges11 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue how to display response from backend API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related