Quelqu'un sait-il comment transmettre la valeur cochée à la case à cocher dans Lightning Web Component?
Mon code ressemble à:
<template> <lightning-card title="My Card" icon-name="custom:custom9"> <div class="slds-m-around_medium"> <lightning-input type="checkbox" label="my checkbox" name="input1" checked="{isChecked}"></lightning-input> </div> </lightning-card> </template>
import { LightningElement, track } from 'lwc'; export default class MyComponent extends LightningElement { @track isChecked; constructor() { super(); isChecked = false; } }
et cela ne fonctionne pas.
4 Réponses :
Veuillez vous référer au code que j'ai écrit pour vous, cela devrait avoir du sens sinon me demander.
Votre html pour une ou plusieurs cases à cocher
import { LightningElement, track } from 'lwc'; export default class CheckboxGroupBasic extends LightningElement { @track value = ['option1']; @track checkvalue ; get options() { return [ { label: 'Ross', value: 'option1' }, { label: 'Rachel', value: 'option2' }, ]; } get selectedValues() { return this.value.join(','); } handleChange(e) { this.value = e.detail.value; } myFunction(e){ // it is simple assigning value. here you can toggle value this.checkvalue = e.target.value; } }
Votre js pour gérer cela, pour une seule case à cocher pour le moment, il attribue une valeur (vous avez demandé) à la case à cocher pour que les choses restent simples, vous pouvez la modifier pour affecter true false en fonction de la dernière valeur.
<template> For multiple Checkbox use Checkbox Group <lightning-checkbox-group name="Checkbox Group" label="Checkbox Group" options={options} value={value} onchange={handleChange}></lightning-checkbox-group> <p>Selected Values are: {selectedValues}</p> for just single Checkbox <input type="checkbox" name="vehicle1" value="Bike" id="mycheck" onclick={myFunction}> I have a bike<br> <p>Selected:</p> {checkvalue} </template>
Nous avons le lien LWC Playground que vous voulez voir fonctionner. https://developer.salesforce.com/docs/ bibliothèque de composants / tools / terrain de jeu / 1_UbRgnJ9 / 9 / edit
<template> <lightning-card variant="Narrow" title="Hello" icon-name="standard:account"> <lightning-input type="toggle" label="Name" onchange={displayStatus} ></lightning-input> <lightning-card> {displaytext} </lightning-card> </lightning-card> </template> =================================js===================================== import { LightningElement, track } from 'lwc'; export default class ConditionalWebComponent extends LightningElement { @track status; @track displaytext= ''; displayStatus(event){ alert(event.target.checked); if(event.target.checked === true){ this.displaytext = 'You are active'; }if(event.target.checked === false){ this.displaytext = 'You are inactive'; } } } event.target.checked - will be used to get value from checkbox
Vous devez définir event sur la case à cocher afin de suivre le comportement par exemple onclick
et à l'intérieur de la méthode, vous pouvez voir la valeur à l'intérieur de event.target.checked
. Voici un exemple de code:
Balise Checkbox:
hereIsTheMethod(event){ console.log(event.target.checked); }
Méthode Javascript:
<lightning-input type="checkbox" onclick={hereIsTheMethod} label="checkbox" name="someName"></lightning-input>
La seule façon dont j'ai compris comment faire cela est d'ajouter l'attribut vérifié
à l'aide de JavaScript.
Cet exemple ajoute manuellement l'attribut vérifié
au DOM élément dans le setter pour estChecked
.
JavaScript:
<template> <lightning-input class="cb" type="checkbox" label="my checkbox" onchange={onChecboxChange}></lightning-input> <br/> <lightning-button label="Toggle Checkbox" onclick={toggleChecked}></lightning-button> <br/> Checked Value: {isChecked} </template>
HTML:
import { LightningElement, track } from 'lwc'; export default class MyComponent extends LightningElement { @track _isChecked = false; set isChecked(newValue) { this._isChecked = newValue; this.template.querySelector('lightning-input.cb').checked = newValue; } get isChecked() { return this._isChecked; } toggleChecked() { this.isChecked = !this.isChecked; } onChecboxChange(event) { this.isChecked = event.target.checked; } }