How to trigger an event from another event

Question

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.

Answer 1

This is a perfect use case for a getter:

get convertedAmount() {
  return (this.amountToConvert || 0) * (this.conversionRate || 0);
}

And you'd change the other sections of code appropriately:

convertToCurrency(event) {
    this.amountToConvert = event.detail.value;
}

---

P.S. Your options getter could be optimized to:

get options() {
    return Object.values(this.bitcoinObjects || {})
        .filter(value => !value.name.includes('Bitcoin'))
        .map(value => ({ label: value.name, value: value.name }));
}