2017-05-09 11 views
0

私はポリマーに紙の入力をいくつか作成しようとしています。項目の横にある「計算」アイコンをクリックすると、値や入力結果は表示されません。値(?)を呼び出すのが間違っているように見えますが、それを修正する方法がわかりません。ありがとう!Polymer 1.0ボタンを押した後、バージングリッドに入力された紙の値を表示する方法は?

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="../bower_components/iron-pages/iron-pages.html"> 
<link rel="import" href="../bower_components/iron-selector/iron-selector.html"> 
<link rel="import" href="shared-styles.html"> 
<link rel="import" href="../bower_components/paper-input/paper-input.html"> 
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> 
<link rel="import" href="../bower_components/paper-button/paper-button.html"> 
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html"> 
<link rel="import" href="../bower_components/vaadin-date-picker/vaadin-date-picker.html"> 

<dom-module id="my-view2"> 
    <template> 
    <style include="shared-styles"> 
     :host { 
     display: block; 
     padding: 10px; 

     } 
     .form paper-icon-button{ 
     left: 45%; 
     height: 120px; 
     width: 120px; 
     } 
     .form paper-input{ 
     margin-left: 150px; 
     margin-right: 150px; 
     } 

    </style> 

    <div class="card"> 
     <div class="form"> 
     <paper-input type="number" name="satu" label="BLABLABLA1" value="{{todo.satu}}"></paper-input> 
     <paper-input type="number" name="dua"label="BLABLABLA2" value="{{todo.dua}}"></paper-input> 
     <paper-input type="number" name="tiga"label="BLABLABLA3" value="{{todo.tiga}}"></paper-input> 


    <paper-icon-button src="calculator.ico" on-tap="_addTodo"></paper-icon-button> 

     </div> 
<vaadin-grid item="{todos}"> 
     <table> 
      <colgroup> 
      <col name="satu"> 
      <col name="dua"> 
      <col name="tiga"> 
      </colgroup> 
     </table> 
     </vaadin-grid> 
    </div> 
    </template> 

    <script> 
    Polymer({ 
     is: 'my-view2', 
     properties: { 
     todo: { 
      type: Object, 
      value: function() { 
      return {}; 
      } 
     }, 
     todos: { 
      type: Array, 
      value: function() { 
      return []; 
      } 
     } 
     }, 

     _addTodo: function() { 
     this.push('todos', this.todo); 
     this.todo = {}; 
     } 

    }); 
    </script> 
</dom-module> 

答えて

0

itemプロパティへのバインドがvaadin gridで無効です。もう1つの括弧が見つからない{}、プロパティはitemsではなく、itemと書かれている必要があります。

+0

コードを修正していただきありがとうございます。私は自分のコードを ''に変更しましたが、依然として列や値がページに表示されませんでした。手伝って頂けますか? @Kubimimovský –

+0

コードを修正していただきありがとうございます。私は自分のコードを ''に変更しましたが、依然として列や値がページに表示されませんでした。手伝って頂けますか? @KubaŠimonovský –

+0

次の文書では、 'vaadin-grid'の中で'

'ではなく' vaadin-grid-column'要素を使うべきですが、前もってvaadin-gridを使ったことがありません。 https://www.webcomponents.org/element/vaadin/vaadin-grid/vaadin-grid さらに、アプリケーションをデバッグする必要があります。 console.log(this.todos)を追加しようとします。それをデバッグして、どこに問題があるかを知ってください。どこでもかまいません –

関連する問題