如何让我的 vaadin 渲染器按预期返回我的渲染函数？答案

【问题标题】：How can i make my vaadin renderers return my render functions as expected?如何让我的 vaadin 渲染器按预期返回我的渲染函数？
【发布时间】：2019-08-09 17:32:40
【问题描述】：

我正在使用 lit-element 和 vaadin 网格，并且我正在尝试使用渲染器函数将数据返回到适当的 vaadin 列。但是，当尝试返回 render() 方法时，它会将数据作为 [object object] 渲染到 vaadin 网格列中。

firstUpdated() {
    super.firstUpdated();

    fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200')
      .then(r => r.json())
      .then(data => {
        this.users = data.result;
      });
  }

  render() {
    return html`
      <style>
        .address {
          white-space: normal;
        }

        vaadin-grid-filter {
          display: flex;
        }

        vaadin-text-field {
          max-width: 100%;
        }
      </style>

      <vaadin-grid .items="${this.users}" .rowDetailsRenderer="${this.rowDetailsRenderer}" column-reordering-allowed multi-sort>
        <vaadin-grid-column width="50px" flex-grow="0" header="#" .renderer="${this.indexRenderer}" resizable></vaadin-grid-column>
        <vaadin-grid-filter-column path="firstName" header="First name"></vaadin-grid-filter-column>
        <vaadin-grid-sort-column path="lastName" header="Last name"></vaadin-grid-sort-column>
        <vaadin-grid-column width="150px" header="Repitch" .renderer="${this.buttonRenderer}"></vaadin-grid-column>
        <vaadin-grid-column width="150px" path="email" .headerRenderer="${this.emailHeaderRenderer}"></vaadin-grid-column>

      </vaadin-grid>
    `;
  }

  buttonRenderer(root, column, rowData) {
    render(
      html`
        <button>Test</button>
      `, 
      root
    );
  }

  indexRenderer(root, column, rowData) {
    render(
      html`
        <div>${rowData.index}</div>
      `, 
      root
    );
  }

我希望将 ${rowData.index} 呈现到第一个 vaadin 网格列中，但 UI 中显示的值是 [object object.我能够显示从 fetch 接收到的数据，因为我可以将其显示到不使用渲染器函数（名字和姓氏）的列中。任何帮助将不胜感激！

【问题讨论】：

那是聚合物吗？
是的，lit-element 是新型聚合物雨伞的一部分
我不明白您为什么会遇到问题。您的示例有效：stackblitz.com/edit/grid-renderers?file=index.ts 我所做的只是添加了users 属性。（顺便说一句，“super.firstUpdated()”不是必需的，但它不会导致问题。）
调用超级方法通常是个好主意，即使它们目前不做任何事情。

标签： javascript vaadin vaadin-grid lit-element lit-html

【解决方案1】：

引用 Thad 的评论：

我不明白你为什么会遇到问题。您的示例有效：http://stackblitz.com/edit/grid-renderers?file=index.ts – 我所做的只是添加了 users 属性。

【讨论】：