Блог

Почему при использовании директивы визуализации мой выбор не открывается. Импорт рендеринга

правильно из другого файла.

Что может быть причиной этой проблемы? Я также добавляю свой список зависимостей webpack, который может быть причиной проблемы

 import {renderer} from './renderer'

constructor() {
    super()
      
    this.allScripts2 = [{'name':3,'id':2}]
}
    
<vaadin-select @change="${(e) => this.chooseCurrentScript(e)}"
    value="${this.currentScript amp;amp; this.currentScript.name ? this.currentScript.name : 'Choose type'}">
        ${renderer(this.allScripts2, () => html`
            <template>
                <vaadin-list-box>
                    ${this.allScripts2.map(el => html`
                        <vaadin-item id="${el.id}">${el.name}</vaadin-item>
                    `)}
                </vaadin-list-box>
            </template>
        `)}
</vaadin-select>


my dependency webpack list
"dependencies": {
    "@babel/runtime": "^7.0.0",
    "@vaadin/router": "^1.1.0",
    "@vaadin/vaadin-combo-box": "^5.4.1",
    "@vaadin/vaadin-tabs": "^3.2.0",
    "@vaadin/vaadin-text-field": "^2.8.1",
    "@webcomponents/webcomponentsjs": "^2.2.1",
    "bcrypt": "^5.0.0",
    "express": "^4.16.3",
    "knex": "^0.21.6",
    "lit-html": "^0.14.0",
    "mysql": "^2.18.1",
    "nanoid": "^3.1.12",
    "node-fetch": "^2.6.1",
    "nodemailer": "^6.4.11",
    "promise-polyfill": "^8.0.0",
    "pwa-helpers": "^0.8.4",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "whatwg-fetch": "^2.0.4"
  },
  

Кажется, что вы смешиваете шаблоны lit-html и. Polymer

Использование директивы визуализации было бы решением для этого случая.

Пожалуйста, взгляните на пример: https://glitch.com/edit /#!/vaadin-lit-средство визуализации-эксперимент?путь=app.js:41:0