Polymer 聚合物2.0铁形态响应触发dom if

如何使用

iron form

中的响应数据来触发

dom if

模板？如果返回了数据，我想显示模板。此代码不起作用。我做错了什么

<link rel="import" href="../components/polymer/polymer-element.html">
<link rel="import" href="../components/polymer/lib/elements/dom-if.html">
<link rel="import" href="../components/iron-form/iron-form.html">

<dom-module id="a-tag">
  <template>
    <iron-form>
      <form action="/" method="get">
        <input name="test">
        <button></button>
      </form>
    </iron-form>

    <template class="iftemplate" is="dom-if" if="[[data]]">
      <p>HELLO</p>
    </template>
  </template>

  <script>
    class ATag extends Polymer.Element {
      static get is() {return 'a-tag'}
      ready() {
        super.ready()
        this.shadowRoot.querySelector('iron-form').addEventListener('iron-form-response', (event) => {
          this.shadowRoot.querySelector('.iftemplate').data = event.detail.response
        })
      }
    }
    customElements.define(ATag.is, ATag)
  </script>
</dom-module>

你好

ATag类。元素{
静态get是（）{return'a-tag'}
就绪（）{
super.ready（）
this.shadowRoot.querySelector（'iron-form'）。addEventListener（'iron-form-response'，（event）=>{
此.shadowRoot.querySelector（'.iftemplate'）.data=event.detail.response
})
}
}
customElements.define（ATag.is，ATag）

您在这里做了很多错误的事情

首先，我建议在表单元素

铁表单

中添加一个

id

，以便您可以轻松地指向聚合元素的代码

<iron-form id="my-form">
  ...
</iron-form>

如果我不明白为什么，您还试图将属性

数据

添加到模板

dom中<代码>[[data]]

引用元素范围内的属性。必须在正确的部分中定义此属性

static get properties () {
  return {
    data: {
      type: String,
      value: ''
    }
  };
}

在事件侦听器回调中：

ready() {
  super.ready()

  this.$['my-form'].addEventListener('iron-form-response', (event) => {
    // this.data = event.detail.response;
    this.data = 'some data'; // for testing
  });
}

ready() {
  super.ready()

  this.$['my-form'].addEventListener('iron-form-response', (event) => {
    // this.data = event.detail.response;
    this.data = 'some data'; // for testing
  });
}