Papierradio-Schaltfläche wird nicht ordnungsgemäß aktualisiert

Question

Ich möchte ein Formular erstellen, das je nach gewähltem Benutzertyp ein anderes Feld anzeigt. Dafür habe ich eine Radiogruppe und einige Datenbindungsset auf der selected Eigenschaft dieser Gruppe.

<paper-radio-group id="newUserTypeRadio" selected="{{newUserType}}"> 
    <paper-radio-button name="admin">admin</paper-radio-button>  
    <paper-radio-button name="user">user</paper-radio-button> 
    <paper-radio-button name="guest">guest</paper-radio-button> 
</paper-radio-group> 

meine Zuhörer:

listeners: { 
      "newUserTypeRadio.change": "userTypeForm" 
     } 

und die Funktion, die (bis jetzt) ​​ist nur ein console.log

 userTypeForm: function() { 
      console.log("user type : ", this.newUserType); 
     } 

SO ja das ist es. Das Problem ist, wenn ich zuerst auf "Admin" Radiobutton, das Protokoll sagt undefined, dann klicke ich auf "Gast", und das Protokoll zeigt "admin", etc ... so ist der selected Wert immer der vorherige Wert, nicht der aktuelle.

Irgendeine Möglichkeit, dies zu beheben?

Answer 1

Hier ist eine Lösung implementiert observer statt listener

<base href="https://polygit.org/components/"> 
 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
<link href="polymer/polymer.html" rel="import"> 
 
<link rel="import" href="paper-radio-group/paper-radio-group.html"> 
 
<link rel="import" href="paper-radio-button/paper-radio-button.html"> 
 
<dom-module id="radio-group"> 
 
    <template> 
 
    <style></style> 
 
    <paper-radio-group id="newUserTypeRadio" selected="{{newUserType}}"> 
 
     <paper-radio-button name="admin">admin</paper-radio-button> 
 
     <paper-radio-button name="user">user</paper-radio-button> 
 
     <paper-radio-button name="guest">guest</paper-radio-button> 
 
    </paper-radio-group> 
 
    </template> 
 
</dom-module> 
 
<script> 
 
    Polymer({ 
 
    is: 'radio-group', 
 
    properties: { 
 
     newUserType: { 
 
     type: String, 
 
     observer: 'userTypeForm' 
 
     } 
 
    }, 
 
    userTypeForm: function(newVal, oldVal) { 
 
     console.log("oldvalue:" + oldVal, ", current value:" + newVal, ", newUserType value:" + this.newUserType); 
 
    } 
 
    }) 
 
</script> 
 

 

 
<radio-group></radio-group>