Question

我想创建一个公式，根据所选的用户类型，显示不同的字段。为此，我在该组的selected属性上设置了一个无线电组和一些数据绑定集。

<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>

我的听众：

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

和函数，（现在）只是一个console.log

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

是的，就是这样。问题是，当我第一次点击“Admin”单选按钮时，日志显示undefined，然后我点击“guest”，日志显示“admin”等...所以{{1} } value始终是前一个值，而不是当前值。

有什么方法可以解决这个问题？

Answer 1

以下是使用observer代替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>

纸质单选按钮无法正确更新

1 个答案: