时间戳

首页 > 解决方案 > 为什么当我使用 vaadin 选择数据在删除后仍然可见但如果我使用简单选择，数据从 UI 中正确删除

vaadin - 为什么当我使用 vaadin 选择数据在删除后仍然可见但如果我使用简单选择，数据从 UI 中正确删除

问题描述

为什么使用渲染器指令，我的选择不会打开。渲染器导入

正确地从另一个文件。

这个问题的原因可能是什么？我还添加了可能导致问题的依赖 webpack 列表

import {renderer} from './renderer'

constructor() {
    super()
      
    this.allScripts2 = [{'name':3,'id':2}]
}
    
<vaadin-select @change="${(e) => this.chooseCurrentScript(e)}"
    value="${this.currentScript && 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"
  },

标签： vaadinlit-element

解决方案

看来您正在混合lit-html和Polymer模板。

使用渲染器指令将是这种情况的解决方案。

请查看示例：https ://glitch.com/edit/#!/vaadin-lit-renderer-experiment?path=app.js%3A41%3A0

推荐阅读