radio button not showing the selected value in litelement component

Question

I am newbie to litelement, I have a lit-element component in which radio click event function on rendering gives undefined.I want to display the selected radio button value in render method as well to the corresponding provider id.

render() {
return html`
  ${this.provider.map(function (provider) {
      return html`
                       <div class="card">
                        <p>${provider.name}</p>
                          <div class="form-group">
                             <div class="form-check pb-2" @click=${this.handleSending}>
                            <input class="form-check-input" type="radio" name="sending" value="Bank Transfer">
                            <label>
                                  Bank Transfer
                            </label><br>
                            <input class="form-check-input" type="radio" name="sending" value="Credit Card">
                            <label>
                                  Credit Card
                             </label><br>
                           </div>
                         </div>
                       </div>`;
           })}
      `;
 }

import { LitElement, html, css } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';
export class Provider extends LitElement {
   constructor(){
     super();
      this.provider=[
         {
           id="1", name="fund" ,description: "Raising Funds"
          },
         {
           id="2", name="transfer" ,description: "transfering money"
         }
     ];
    }
 handleSending(){
    var selected_sendoption = this.shadowRoot.querySelector('input[name = "sending"]:checked').value;
  }
  render() {
return html`
  ${this.provider.map(function (provider) {
      return html`
                       <div class="card">
                        <p>${provider.name}</p>
                          <div class="form-group">
                             <div class="form-check pb-2" @click=${this.handleSending}>
                            <input class="form-check-input" type="radio" name="sending" value="Bank Transfer">
                            <label>
                                  Bank Transfer
                            </label><br>
                            <input class="form-check-input" type="radio" name="sending" value="Credit Card">
                            <label>
                                  Credit Card
                             </label><br>
                           </div>
                         </div>
                       </div>`;
           })}
      `;
 }
}

Expected Result, show the radio button selected value in render html

Isochronous · Answer 1 · 2019-05-13T16:44:24.373

You may simply need to bind the event handler to the element in question, and you also need to wrap your event handler in quotes just like any other HTML attribute:

<div class="form-check pb-2" @click="${this.handleSending.bind(this)}">

You also may want to remove the spaces in your selector - the selector may work, but I've personally never seen selectors with spaces in them like that.

edit: The problem may also be with the fact that you're nesting function calls, so the value of this might be different than you expect. You can add a line like this at the top of your render method: const context = this;, and then replace all references to this with context in the remainder of the template.

radio button not showing the selected value in litelement component

1 Answers1