Polymer获取paper-input元素值失败：弹窗显示为空求助

我来帮你搞定这个问题！你遇到弹窗显示为空的情况，核心原因是按钮的事件绑定写法不符合Polymer的规则，还有个小语法错误需要修正。

问题分析 #

你的代码里按钮的事件绑定写的是：

<button onClick="{{getData}}">Get data</button>

这里存在两个关键问题：

1. Polymer的事件绑定属性需要遵循短横线分隔的命名规范（kebab-case），也就是on-click，而非原生JS的驼峰式onClick；
2. 绑定组件方法时不需要用双大括号{{}}包裹，直接写方法名即可。

虽然你对name属性的定义和paper-input的双向绑定写法是正确的（paper-input原生支持value="{{name}}"的双向绑定），但事件绑定的错误会导致getData方法无法被正确触发，或者触发时上下文异常，最终导致this.name拿不到输入框的值。

修正后的完整代码 #

<dom-module id="hello-world">
  <template>
    <h1> Hello [[name]]</h1>
    <paper-input value="{{name}}"></paper-input>
    <button on-click="getData">Get data</button>
  </template>
  <script>
    Polymer({
      is: "hello-world",
      properties: {
        name: {
          type: String,
          value: '1'
        }
      },
      getData: function () {
        alert(this.name);
      }
    })
  </script>
</dom-module>

额外注意事项 #

• 确保你已经正确导入了paper-input组件（比如通过<link rel="import" href="../paper-input/paper-input.html">这类语句），如果组件未导入，paper-input无法正常渲染，绑定也会失效；
• 你的代码看起来是Polymer 1.x的写法，如果你使用的是Polymer 2+版本，语法会有部分调整，但上述修正对于1.x版本完全适用。

现在点击按钮，应该就能正常弹出输入框里的内容啦！

内容的提问来源于stack exchange，提问作者Kseniya