The core issue here is that the:
<lightning-input-field></lightning-input-field>
expects to have data via a
<lightning-record-edit-form></lighting-record-edit-form>
Since the playground is not backed by a Salesforce Org there is inherently no Record data.
The documentation says:
To create a record create layout, use this component with lightning-record-edit-form and pass in the object API name of the record you're creating. You don't need additional Apex controllers or Lightning Data Service as data refresh happens automatically.
While docs don't explicitly call out that you can't use this on it's own this is the case.
You can use a
<lightning-input></lightning-input>
There are some pre-made examples in the playground.
Classic... Javascript is quite weird, this
changes quite frequently with respect to the context.
in setInterval
, this
does not refer to your binded variables, but something else.
You have to pass this
as some param in setInterval
import { LightningElement, api, track, wire } from 'lwc';
export default class LoadContact extends LightningElement {
@track closedt ='2019-08-09';
@track daysFinal =0;
@track hoursFinal;
@track minutesFinal;
@track secondsFinal;
timeIntervalInstance;
totalMilliseconds = 0;
datecounter(){
let oppCloseDt = new Date(this.closedt);
let months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
let monthName = months[oppCloseDt.getMonth()];
let dateNumber = oppCloseDt.getDate();
let yearNumber = oppCloseDt.getFullYear();
let closeDateVar = monthName+' '+dateNumber+' '+yearNumber;
let opptCloseDate = new Date( closeDateVar+" 00:00:00 ");
let myparam = this;
// eslint-disable-next-line @lwc/lwc/no-async-operation
setInterval(function() {
let opptyCloseDate = new Date( closeDateVar+" 00:00:00 ");
window.console.log('opptyCloseDate...' + opptyCloseDate);
let nowdate = new Date();
let timeDiff = opptyCloseDate.getTime()- nowdate.getTime();
let seconds=Math.floor(timeDiff/1000); // seconds
let minutes=Math.floor(seconds/60); //minute
let hours=Math.floor(minutes/60); //hours
let days=Math.floor(hours/24); //days
hours %=24;
minutes %=60;
seconds %=60;
myparam.hoursFinal =hours;
myparam.daysFinal =days;
myparam.minutesFinal =minutes;
myparam.secondsFinal =seconds;
myparam.daysFinal =null;
myparam.daysFinal = days;
window.console.log('this.hoursFinal...' + myparam.hoursFinal);
window.console.log('this.daysFinal...' + myparam.daysFinal);
}, 5000 , myparam);
}
}
Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/6dm391HNp/2/edit
Src: https://stackoverflow.com/questions/7890685/referencing-this-inside-setinterval-settimeout-within-object-prototype-methods/7890978
Best Answer
From the specification of lightning-input, it looks like there is no native
onclick
event.Its recommended that you should be using
onchange
instead.HTML:
Js:
Playground Link : https://developer.salesforce.com/docs/component-library/tools/playground/lsOssohh3/5/edit
Reason why its firing two events onclick:
In normal html-checkbox, the check uncheck only work when you click on the checkbox.
In
lightning-input
the check-uncheck work even on click of Label. Both checkbox and label react to click as they both are children of div/span that handles the onclick event and propagates it down to all reactive children