Search code examples
polymer-3.x

Polymer 3.0 dom-repeat not repeating template

Hi I was working on a todo list app with Polymer 3.0 and am having some trouble getting dom-repeat to work.

Here is the code I have:

/** @format */

import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
import '@polymer/paper-button/paper-button.js';
import '@polymer/paper-checkbox/paper-checkbox.js';
import '@polymer/paper-input/paper-input.js';
import '@polymer/polymer/lib/elements/dom-repeat.js';
/**
 * `todo-element`
 *
 *
 * @customElement
 * @polymer
 * @demo demo/index.html
 */
class TodoElement extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>
      <h2>[[name]]</h2>
      <div class="todo-list>  
        <dom-repeat items={{tasks}}>
          <template>
            <div class="task">
              <paper-checkbox></paper-checkbox>
              <paper-input label="Task: " value="[[task]]"></paper-input>
            </div>
          </template>
        </dom-repeat>
        <paper-button>Add Task</paper-button>
        <h4>[[sub]]</h4>
      </div>
      
    `;
  }
  static get properties() {
    return {
      name: {
        type: String,
        value: 'Todo list',
      },
      sub: {
        type: String,
        value: 'Completed',
      },
      tasks: {
        type: Array,
        value: () => ['task1', 'task2', 'task3'],
      },
    };
  }
}

window.customElements.define('todo-element', TodoElement);

Here what I see on the webapp: enter image description here

What I am expecting is to see 3 of the checkbox, input, and button but I only get one. Thanks in advance for any assistance on this!

Solution

  • I was missing a " in my <div class="todo-list>. When I switched it to it started working