Polymer 1 paper-radio-group issue

Question

Я пытаюсь связать набор paper-radio-button с помощью paper-radio-group. Вот мой код в 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> 

index.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">