切换纸按钮的禁用属性

Toggle disabled attribute of paper-button

我有一个 paper-button(发送按钮)与多个 paper-input fields/element 有关。 只要用户填写所有相关的 paper-input fields/elements(newEmailpasswd).

这是元素的重要部分

  <gold-email-input id="newEmail"
                    label="Email"
                    no-label-float required>
  </gold-email-input>

  <paper-input id="passwd"
               type="password"
               label="Password"
               no-label-float required>
  </paper-input>

  <div class="buttons">
    <paper-button dialog-dismiss>Cancel</paper-button>
    <paper-button dialog-confirm autofocus
                  disabled$="[[isInputEmpty($$.newEmail.value, $$.passwd.value)]]"
                  on-tap="changeEmail"
                  class="default">Save</paper-button>
  </div>

函数 disabled$="[[isInputEmpty($$.newEmail.value, $$.passwd.value)]]" 不会newEmail.value 或 passdw.value 更改时调用。

这是 JavaScript 部分:

  isInputEmpty (email, pass) {
    if (email.length === 0 || pass.length === 0) return true;
    return false;
  }

truefalse 之间切换属性 disabled 的正确实现是什么?

  1. disabled实际上是一个property of <paper-button> (not an attribute), so you should not be using the attribute-binding syntax(即$=)。

    <!-- don't do this -->
    <!--
    <paper-button disabled$="[[isInputEmpty(...)]]">
    -->
    
    <paper-button disabled="[[isInputEmpty(...)]]">
    
  2. 您试图在绑定中传递 newEmailpasswd 的值,但您没有使用正确的语法。您必须将来自这些输入的值绑定到您将在计算绑定中作为参数传递的属性:

    <gold-email-input value="{{email}}"></gold-email-input>
    <paper-input value="{{password}}"></paper-input>
    <paper-button disabled="[[isInputEmpty(email, password)]]"></paper-button>