Polymer 1 paper-radio-group issue

Question

我正在尝试使用paper-radio-group 绑定一组paper-radio-button。这是我在Index.html 中的代码：

<paper-card heading="Radio button group binding">
  <div class="card-content">
    <h4>Which writer you like the most?</h4>
    <paper-radio-group>
      <radio-group-binder data='[{"name": "William Shakespere", "value": "ws"}, {"name": "Arthur Conan Doyale", "value": "cd"}, {"name": "Shidney Sheldon", "value": "ss"}]'>
      </radio-group-binder>
  </paper-radio-group>
  </div>
</paper-card>

我的自定义元素如下所示：

<template>
  <template is="dom-repeat" items="{{data}}">
     <paper-radio-button name="{{item.value}}">{{item.name}}</paper-radio-button>
  </template>

数据绑定很好，但我可以在组内选择多个单选按钮。我在这里做错了什么？

我附上了它现在表现的截图。我需要在这个radio-button-group 中一次只能选择一个选项。

Answer 1

您需要定义attr-for-selected 来引用它需要分组的属性。

<paper-radio-group attr-for-selected="name">

Answer 2

实际上selected={{button}} 会将所选单选按钮的名称/值存储到变量按钮中。以便您以后可以根据需要使用它。至于你的问题“在单选组中只选择一个单选按钮”，我做了一些如下的改变，它对我有用。请试一试：

自定义元素：

<dom-module id="radio-group-binder">
<template>
 <paper-radio-group selected="{{button}}" attr-for-selected="name">
  <template is="dom-repeat" items="{{data}}">
     <paper-radio-button name="{{item.value}}">{{item.name}}</paper-radio-button>
  </template>
 </paper-radio-group>
</template>

索引.html：

 <radio-group-binder data={{data}}></radio-group-binder>
    <script>
   var data = [{"name": "William Shakespere", "value": "ws"}, {"name": "Arthur Conan Doyale", "value": "cd"}, {"name": "Shidney Sheldon", "value": "ss"}];
   document.querySelector('radio-group-binder').data = data; 
    </script>

---

您可能需要在这两个地方添加“已选择”。你可以试试下面的方法吗？

<radio-group-binder selected="{{button}}" data= yourdata....    

<paper-radio-group selected="{{button}}" attr-for-selected="name">