Question 232124 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to pass value from js class to vue-component

as shown in the code posted below, in the .js file, i consume an endpoint, and based on the response from the backend i set specific status indicates the status of digitization.in other words, if the digitization operation completes successful i set a value
to digitizationStatus as follows:

if (this.#getOperation() === BtnDigitizePolygonConstants.CONST_STRING_DIGITIZE.description) {
    this.#enableDigitization()
    digitizationStatus = BtnDigitizePolygonConstants.CONST_DIGITIZATION_STATE_SUCCESSFUL.description; //<====
}

in case of occurance of an error while communicating with the back-end, i set the status as follows:

.catch(e=> console.error(errorTag, 'faild to fetch WS /getTIFFForSubsetAsNIRRange/. Error:', e))
    digitizationStatus = BtnDigitizePolygonConstants.CONST_DIGITIZATION_STATE_FAILED.description;  // <======
});

the problem is, the DigitizePolygonInteractions.js is js class, and i want to pass the value of digitizationStatu to vue-component. for this regars, i googled some posed on stackoverflow, and i found the to pass value from a js class to vue-component,
i should export the variable as follows:

export let digitizationStatus = BtnDigitizePolygonConstants.CONST_DIGITIZATION_STATE_NOT_STARTED.description;

and after that, in vue-component that should receive the value of digitizationStatu, i should do the following:

<template>
    <span>{{ digitizationStatusText }}</span>
</template>

<script>
    import { digitizationStatus } from '../xx/xx/xxx/xx/DigitizePolygonInteractions.js';
    let digitizationStatusText = ref(BtnDigitizePolygonConstants.CONST_DIGITIZATION_STATE_NOT_STARTED.description); <====
    export default  {

        data() {
            return {
                digitizationStatusText: digitizationStatus,
            }
        }
    }
</script>

but what happens is, initially when the app starts the <span> element in the vue-component displays NOT_STARTE which is correct, but despite the communication "web-service" fails, the value of digitizationStatusText in vue-component does not change
accordingly.

please let me know how to correctly pass value from a java-script class to a vue-component

how i export the digitizationStatus in class DigitizePolygonInteractions.js:

export let digitizationStatus = BtnDigitizePolygonConstants.CONST_DIGITIZATION_STATE_NOT_STARTED.description; //<=====
export class DigitizePolygonInteractions extends MapBuilder {
    ...
    ...
    ...
}

.js

const requestOptions = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        wktRepr: this.wktRepr,
        epsgCode: epsgCode,
    }),
};
fetch(endPointsURLs.VUE_APP_LOCAL_HOST_4000.description + '/getTIFFForSubsetAsNIRRange/', requestOptions)
.then(response => {
    response.text()
    .then(text=> {
        console.info(infoTag, 'back-end reponse:', text);
        if (this.#getOperation() === BtnDigitizePolygonConstants.CONST_STRING_DIGITIZE.description) {
            this.#enableDigitization()
            digitizationStatus = BtnDigitizePolygonConstants.CONST_DIGITIZATION_STATE_SUCCESSFUL.description;
        }
    })
    .catch(e=>console.error(errorTag, 'response.text() is not defined. Error:', e))
})
.catch(e=> console.error(errorTag, 'faild to fetch WS /getTIFFForSubsetAsNIRRange/. Error:', e))
    digitizationStatus = BtnDigitizePolygonConstants.CONST_DIGITIZATION_STATE_FAILED.description;  // <======
});

BtnDigitizePolygonConstants.js

function define(name, value) {
Object.defineProperty(BtnDigitizePolygonConstants, name, {
    value: value,
    enumerable: true,
    writable: false,
});
}

export let BtnDigitizePolygonConstants = {};

define('CONST_DIGITIZATION_STATE_SUCCESSFUL', Symbol('SUCCESSFUL'));
define('CONST_DIGITIZATION_STATE_FAILED', Symbol('FAILED'));
define('CONST_DIGITIZATION_STATE_NOT_STARTED', Symbol('NOT_STARTED'));
Tags:

2

Answers


  1. 0

    You have to understand the principles of react vue reacts work on object cell references you need to use refs from the beginning because there is no power to allow response tracking from variables set digitizationStatus to ref like this:

    class ... {
  digitizationStatus = ref()
}
...
if (this.#getOperation() === BtnDigitizePolygonConstants.CONST_STRING_DIGITIZE.description) {
    this.#enableDigitization()
    digitizationStatus.value = BtnDigitizePolygonConstants.CONST_DIGITIZATION_STATE_SUCCESSFUL.description; //<====
}
    Login or Signup to reply.
  2. 0

    As per your requirement you can use Event Bus to pass the data from JavaScript file to Vue.

    In your main.js :

    import Vue from 'vue';
export const eventBus = new Vue();

    And then in your DigitizePolygonInteractions.js file, You can emit the digitizationStatus using $emit method on eventBus.

    import { eventBus } from './main.js';

// Your other code logic will come here
{
  eventBus.$emit('digitizationStatusUpdated', digitizationStatus);
}

    And then you can listen this event in your vue-component :

    In Vue component script section

    import { eventBus } from './main.js'; // Adjust the path accordingly

export default {
  data() {
    return {
      digitizationStatus: ''
    }
  },
  created() {
    eventBus.$on('digitizationStatusUpdated', (status) => {
      this.digitizationStatus = status;
    })
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search