переключатель не отображает выбранное значение в элементе litelement - PullRequest
Новая
       45

переключатель не отображает выбранное значение в элементе litelement

0 голосов
/ 28 марта 2019

Я новичок в litelement, у меня есть компонент с подсветкой, в котором функция события радио-щелчка при рендеринге дает неопределенное значение. Я хочу отобразить значение выбранного переключателя в методе рендеринга, а также соответствующий идентификатор поставщика. 

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>`;
           })}
      `;
 }
}

Ожидаемый результат, показать значение переключателя, выбранное в визуализации html

1 Ответ

0 голосов
/ 13 мая 2019

Может потребоваться просто привязать обработчик событий к рассматриваемому элементу, а также обернуть обработчик событий в кавычки, как и любой другой атрибут HTML: 

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

Вы также можете удалить пробелы в своем селекторе - селектор может работать, но я лично никогда не видел селекторы с такими пробелами в этом.

edit: Проблема также может заключаться в том, что вы вкладываете вызовы функций, поэтому значение this может отличаться от ожидаемого. Вы можете добавить такую ​​строку в верхней части метода рендеринга: const context = this;, а затем заменить все ссылки на this на context в оставшейся части шаблона.

...