Отображение переключателя со значениями объекта в javascript карты - PullRequest
Новая
       41

Отображение переключателя со значениями объекта в javascript карты

0 голосов
/ 04 апреля 2019

У меня есть объект 'obj', и мне нужно отображать переключатели для каждого объекта.Для каждого объекта отображаются две радиокнопки. Когда я выбираю радиокнопку, для идентификатора «trans» он меняет / отражает другой 

  handleSend(){
    var selected_sendoption = this.shadowRoot.querySelector('input[name = "sending"]:checked').value;
    this.service_send = this.shadowRoot.getElementById("paymentservice_receive");
    this.service_send.innerHTML = selected_sendoption;
    this.selectedsend = selected_sendoption;
  }
render(){
return html`
   ${obj.map((pr)=>{
     <div class="form-check" @click=${this.handleSend}>
       <input class="form-check-input" name="sending" type="radio" id="provider-send-${obj.id}" value="trans">Trans
       <input class="form-check-input" name="sending" type="radio" id="provider-send-${obj.id}" value="insta">Insta
   </div>
<p id="service_send"></p> // display the selected radio button value for corresponding obj selected
   })
  }`;
}

var obj=[
{
    id:"id1",
    in:"trans" 
},
{ 
  id:"id2",
  in:"insta"
}
]

Expected Output:

Display radio buttons for id1

Display radio buttons for id2

Display selected radio buttons for corresponding id

1 Ответ

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

Я думаю, что может помочь:)

  1. Вам потребуется map над массивом
  2. Вернуть новый TemplateResult, используя html
  3. Вы хотите создать «полный» динамический атрибут через id=${'..'}

Вот соответствующие изменения / детали 

render() {
  return html`
     ${obj.map((pr)=> html`
       <input id=${`provider-send-${pr.id}`} value=${`trans-${pr.id}`}>Trans
     `)
  `;
}
...