Polymer 2 と ES6 は初めてです。鉄のフォームに入力されたデータを console.log できます。ただし、画面に出力することはできません。私はこの行が目標を達成すると思った:
this.querySelector('.output').innerHTML = JSON.stringify(this.$.pizzaOrder.favoritePizza);
しかし、それは私にエラーを与えます: Uncaught TypeError: Cannot set property 'innerHTML' of null. カスタム要素 my-form の完全なコードは次のとおりです。
<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/iron-form/iron-form.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<dom-module id="my-form">
<template>
<iron-form id="pizzaOrder">
<form action="/foo" method="get">
Topping?
<input type="text" id="favoritePizza" name="favoritePizza" value="favoritePizza" required></input>
<br> Extra cheese?
<input type="checkbox" id="cheese" name="cheese" value="cheese" checked></input>
<br> Size?
<input type="radio" id="small" name="size" value="small"> Small </input>
<br>
<input type="radio" id="medium" name="size" value="medium"> Medium </input>
<br>
<input type="radio" id="large" name="size" value="large" checked> Large </input>
<br>
Delivery <paper-checkbox id="delivery" name="delivery" checked></paper-checkbox>
<!--When you click, 'this.' is added to what you set equal to on-click-->
<paper-button raised on-click="_submitForm">Submit</paper-button>
</form>
</iron-form>
<h4>Your pizza is as follows:</h4>
<div class="output"></div>
</template>
<script>
/**
* `sample-polymer`
* sample
*
* @customElement
* @polymer
* @demo demo/index.html
*/
class MyForm extends Polymer.Element {
static get is() { return 'my-form'; }
static get properties() {
return {
favoritePizza: {
type: String,
notify: true
},
cheese: {
type: Boolean,
notify: true
},
size: {
type: String,
notify: true
},
delivery: {
type: Boolean,
notify: true
},
response: {
type: Object
},
pizzaOrder: {
type: Object
}
};
}
_handleInput(event) {
}
_submitForm(event) {
console.log("Form submitted");
console.log(this.$.pizzaOrder.serializeForm());
this.querySelector('.output').innerHTML = JSON.stringify(this.$.pizzaOrder.favoritePizza);
}
}
window.customElements.define(MyForm.is, MyForm);
</script>
</dom-module>`