0

I'm trying to associated lightning input values to be used as variables

JS

import { LightningElement,wire, api} from 'lwc';
import getClass from "@salesforce/apex/SchedulableClasses.SchedulableClasses";
import setPlan from "@salesforce/apex/Plan.Plan";
export default class LightningExampleInputDateTime extends LightningElement {
    @wire (getClass) apexclass;
    @api jobName ;
    @api minute;
    @api hour;
    $d='0'+this.minute+this.hour+'* * ?';
    $jobName=this.jobName;
    handleClick(){
        setPlan({jobName:this.jobName,d:this.d,scheduleName:'PlanTest'})
           .then(result => {
              alert('Success');
           })
           .catch(error => {
               alert('Fail');
                   });
     }
    }

HTML

<template>
    <h2>Planning Apex Action    </h2>
    <div>
        <lightning-input label="Job Name" >{jobName}</lightning-input>
        </div>
    <h3>Apex Action</h3>
    <template if:true={apexclass.data}>
            <template for:each={apexclass.data} for:item="apex">
                    <lightning-input type="checkbox" key={apex.Id} label={apex.Name} value={apexName}></lightning-input>
            </template>
    </template>
    <div>
        <h3>Time of execution</h3>
        <lightning-input name="hours" label="Hour" value={hour}></lightning-input>
        <lightning-input name="minutes" label="Minute" value={minute} ></lightning-input>
    </div>

<lightning-button label="Submit" onclick={handleClick}></lightning-button>
    </div>

</template>         

The handle function works ok. But after trying to set the varibles with api and inserting values from the html using the lightning input the function isn't working. The alert that i'm getting is fail which signifies an error. Which i didn't have before without the @api

8
  • 4
    What's the problem and the question? Commented Jul 12, 2019 at 11:56
  • @MartinLezer it is mentioned i'm getting an error after adding the api but i'm using it the same way it is explained in the documentation Commented Jul 12, 2019 at 12:05
  • What error message you get? can you provide exact verbatim? Commented Jul 12, 2019 at 12:08
  • Also I dont see any onchange handler on lightning-input that will update the values back in javascript Commented Jul 12, 2019 at 12:09
  • 1
    The error you get is probably because your @api variables are never set. Their values are undefined. In LWC, the binding is only one way. ie, only the javascript can update the values for the view. If you want the view to update the values you have to add some change handler to your inputs. Commented Jul 12, 2019 at 12:21

1 Answer 1

-1

At the end i was missing the change handler for the javascript Here is the new and final javascript and html that works perfectly

JS

import { LightningElement,wire, api} from 'lwc';
import getClass from "@salesforce/apex/SchedulableClasses.SchedulableClasses";
import setPlan from "@salesforce/apex/Plan.Plan";
export default class LightningExampleInputDateTime extends LightningElement {
    @wire (getClass) apexclass;
    @api jobName ;
    @api minute='0';
    @api hour='0';

    handleClick(){
        setPlan({jobName:this.jobName,d:'0 '+this.minute+' '+this.hour+' * * ?',scheduleName:'PlanTest'})
           .then(result => {
              alert('Success');
           })
           .catch(error => {
               alert('Fail');
                   });
     }
     handleNameChange(event){
         this.jobName = event.target.value;
     }
     handleMinuteChange(event){
         this.minute= event.target.value;
     }
     handleHourChange(event){
         this.hour=event.target.value;
     }
    }

HTML

<template>
    <h2>Planning Apex Action    </h2>
    <div>
        <lightning-input label="Job Name" onchange={handleNameChange} value={jobName}></lightning-input>
        </div>
    <h3>Apex Action</h3>
    <template if:true={apexclass.data}>
            <template for:each={apexclass.data} for:item="apex">
                    <lightning-input type="checkbox" key={apex.Id} label={apex.Name} value={apexName}></lightning-input>
            </template>
    </template>
    <div>
        <h3>Time of execution</h3>
        <lightning-input name="hours" label="Hour" onchange={handleHourChange} value={hour}></lightning-input>
        <lightning-input name="minutes" label="Minute" onchange={handleMinuteChange} value={minute} ></lightning-input>
    </div>
    <div>
        <lightning-button label="Submit" onclick={handleClick}></lightning-button>
    </div>

</template> 
5
  • This code will not work. Variables with @api are read-only to the component. Commented Jul 13, 2019 at 15:23
  • @KevinVenkiteswaran this code is working and perfectly Commented Jul 15, 2019 at 8:11
  • When you run it in dev mode you’ll find warnings in the browser’s console. Prod mode (for now) doesn’t enforce those restrictions but may in the future at which time the code will not work. Eg assigning to this.minute will have no effect. Commented Jul 15, 2019 at 13:14
  • @KevinVenkiteswaran can you specify the warning that shows you. And also your document is about setters and getters, and to use them properly. Commented Jul 16, 2019 at 10:34

Not the answer you're looking for? Browse other questions tagged .