Sorry for the bad title, I am not sure the right way to ask this as I am fairly new to LWC and JS.
I have a component which looks like below:
<template>
<lightning-card>
<div>
<div class="slds-clearfix">
<h1 class="slds-float_left slds-inline slds-text-heading_medium">Bitcoin Converter</h1>
<lightning-combobox class="slds-float_right" name="currency" label="Currency" value={value} placeholder={value} options={options} onchange={handleChange}></lightning-combobox>
</div>
<div class="slds-grid slds-gutters slds-clearfix">
<div class="slds-col slds-size_3-of-12 slds-p-around_medium lgc-bg slds-float_left">
<lightning-input type="number" placeholder=100 label="Bitcoin Amount" value={amountToConvert} onchange={convertToCurrency} ></lightning-input>
</div>
<div class="slds-col slds-size_3-of-12 slds-p-around_medium lgc-bg slds-float_right">
<lightning-input type="number" label={value} value={convertedAmount}></lightning-input>
</div>
</div>
</div>
</lightning-card>
</template>
My controller looks like below:
import { LightningElement, wire} from 'lwc';
import getBitcoinObjects from '@salesforce/apex/BitcoinToUSDConvertor.getBitcoinObjects';
export default class BitcoinConvertor extends LightningElement {
bitcoinObjects;
value = 'US Dollar';
conversionRate;
amountToConvert = 100;
@wire(getBitcoinObjects)
wiredObjects({error, data}) {
if (data) {
this.bitcoinObjects = data;
this.conversionRate = data.find(el => el.name == 'US Dollar').rate;
this.error = undefined;
}
else if (error) {
this.error = error;
this.bitcoinObjects = undefined;
}
}
get options() {
let options =[];
if(this.bitcoinObjects != undefined) {
Object.values(this.bitcoinObjects).forEach((object) => {
if (!object.name.includes('Bitcoin')) {
let obj = {label: object.name, value: object.name};
options.push(obj);
}
})
}
return options;
}
handleChange(event) {
this.value = event.detail.value;
this.conversionRate = this.bitcoinObjects.find(el => el.name == event.detail.value).rate;
}
convertToCurrency(event) {
this.amountToConvert = event.detail.value;
this.convertedAmount = this.amountToConvert * this.conversionRate;
}
}
I have 2 problems. First of all on page load the default amountToConvert
is not calculated. I tried using connectedCallback()
but the getBitcoinObjects()
method in Apex does a web callout so I need that to run first.
Secondly, and most importantly, when I change the value in the combobox I don't know how to trigger the convertToCurrency()
event properly. I have tried triggering a custom event in handleChange()
but this didn't work. It will only trigger convertToCurrency()
event if I adjust the value in the Bitcoin Amount
field.