I am very new to VUE so please forgive if my terminology is not correct.
I am trying to set a variable which is defined in the script tag "data()" function.
I am trying to set a new value for a variable defined in data() from inside the "created()" lifecycle event. This works fine if done at the root level, but i need to do it within 2 nested calls as shown below and it will not work when nested inside the function calls:
app.vue
<template>
<div class="container">
<Button @btn-click="providerPicked" id="current-provider" :text="'Current Provider: ' + currentProvider" />
</div>
</template>
<script>
import { ZOHO } from "./assets/ZohoEmbededAppSDK.min.js";
import Button from './components/Button'
export default {
name: 'App',
components: {
Button,
},
data() {
return{
currentProvider: 'x'
}
},
created() {
console.log("CREATED HOOK")
ZOHO.embeddedApp.on("PageLoad",function(data)
{
console.log(data);
//Custom Business logic goes here
let entity = data.Entity;
let recordID = data.EntityId[0];
ZOHO.CRM.API.getRecord({Entity:entity,RecordID:recordID})
.then(function(data){
console.log(data.data[0])
console.log(data.data[0].name)
//THIS DOES NOT WORK - variable still comes back 'x' in template, notice this is nested twice.
this.currentProvider = data.data[0].name;
});
});
ZOHO.embeddedApp.init();
//THIS DOES WORK - SETS VAR TO "reee" in template, notice this is not nested
this.currentProvider = "reee"
}
}
</script>
Use arrow functions instead of anonymous functions.
Arrow functions do not bind this, and thus this will refer to the outer scope.
created() {
console.log("CREATED HOOK")
ZOHO.embeddedApp.on("PageLoad", (data) => {
console.log(data);
//Custom Business logic goes here
let entity = data.Entity;
let recordID = data.EntityId[0];
ZOHO.CRM.API.getRecord({ Entity: entity, RecordID: recordID })
.then((data) => {
console.log(data.data[0])
console.log(data.data[0].name)
//THIS DOES NOT WORK - variable still comes back 'x' in template, notice this is nested twice.
this.currentProvider = data.data[0].name;
});
});
ZOHO.embeddedApp.init();
//THIS DOES WORK - SETS VAR TO "reee" in template, notice this is not nested
this.currentProvider = "reee"
}