在地图中显示带有对象值的单选按钮 javascript
Display radio button with object values in map javascript
我有一个对象 'obj' 并且需要为每个对象显示单选按钮。
对于每个对象,显示两个单选按钮,当 i select radio button , for id"trans", it changes/reflects the other
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
我认为这会有所帮助:)
- 您需要
map
遍历数组
- Return 使用
html
的新 TemplateResult
- 您想通过
id=${'..'}
创建 "full" 动态属性
这里是相关的changes/parts
render() {
return html`
${obj.map((pr)=> html`
<input id=${`provider-send-${pr.id}`} value=${`trans-${pr.id}`}>Trans
`)
`;
}
我有一个对象 'obj' 并且需要为每个对象显示单选按钮。 对于每个对象,显示两个单选按钮,当 i select radio button , for id"trans", it changes/reflects the other
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
我认为这会有所帮助:)
- 您需要
map
遍历数组 - Return 使用
html
的新 TemplateResult
- 您想通过
id=${'..'}
创建 "full" 动态属性
这里是相关的changes/parts
render() {
return html`
${obj.map((pr)=> html`
<input id=${`provider-send-${pr.id}`} value=${`trans-${pr.id}`}>Trans
`)
`;
}