纸张输入值不可访问聚合物

Question

我对 Polymer 还很陌生，但我认为这是一个很棒的概念，尽管我在实现非常基本的东西时遇到了一些困难，而我通常不会遇到任何问题。

我有一个模板，其中有一个纸张输入元素。如果我填充这个元素，我希望能够单击一个按钮并将值从该输入字段传输到其他地方。简单吧？

不，无论我做什么，我似乎都无法访问该输入字段的值。好像这个ID不存在一样。我认为这是因为阴影 dom，但我完全不知道为什么！

我已经尝试使用 this.$.messaged.value、document.querySelector('#messaged').value 等，但均未成功。还需要做什么？提前致谢！！

<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
<dom-module id="dd-bully">
    <template>
 <paper-input id="messaged" value="{{messaged}}"></paper-input>
    <paper-button raised on-tap="sendmsg"></paper-button>
    </template>
    <script src="bully.js"></script>
</dom-module>

以及以下脚本内容：

class Bully extends Polymer.Element {
        static get is() {
            return 'dd-bully';
        }

        static get properties() {
            return {
                messaged: {
                    type: String,
                    value: "test message"
                }
            };
        }
        sendmsg() {
            this.messaged = window.msg /* latest test */
            console.log(messaged)
            window.socket.emit('sendmsg', window.msg, err => {
                if (err) {
                    console.error(err);
                    return;
                }
            });
        }
    }
    customElements.define(Bully.is, Bully);

Answer 1

<paper-input> 已经通过双向数据绑定（即 value="{{messaged}}"）更新 messaged。在 sendmsg() 中，您可以通过 this.messaged（而不是 this.messaged.value）读取 messaged 的值。

sendmsg() {
  console.log('messaged', this.messaged);
  this.messaged += ' SENT!';
}

demo

纸张输入值不可访问聚合物

Paper-input value not accessible Polymer

javascript

polymer

polymer-2.x