我如何使用 fetch 填充 vaadin-grid？

Question

我正在使用 lit-element 和 vaadin-grid 制作 table。它与这个例子非常相似。 https://stackblitz.com/edit/grid-renderers?file=grid-demo.js

但是，它一直告诉我语法错误

我不明白为什么。我可以看到请求通过并发回结果。

这是我的元素中的一些代码。

  static get properties() {
    return {
        rolls: {
            type: Array
          }
    };
}



 firstUpdated() {
        fetch('http://localhost:2241/api/micrographics/claims/01P78168', {
           mode: 'no-cors'          
          }).then(r=>console.log(r)).then(r => r.json())
          .then(data => {
            this.rolls = data.result;
          });

    }  


render() {
        return html`


      <p>Search Edit Table</p>


      <vaadin-grid multiSort id="valo-grid" .items="${this.rolls}" >

        <vaadin-grid-sort-column resizable width="2em" path="ID" header="ID">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable width="2em" path="Roll" header="Roll No">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable width="3em" path="Frame" header="Frame No">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable .renderer="${this.editTextRender}" 
         path="PolicyOcc_No" header="Policy/OccNo" width="11em">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable .renderer="${this.editDateRender}"
        path="ScanDate" header="Scan Date" width="10em" >
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable width="2em" path="CompanyBranch" header="Company">
        </vaadin-grid-sort-column >

        <vaadin-grid-sort-column resizable .renderer="${this.editDateRender}"
         path="PurgeDate" header="Purge Date" width="10em">
        </vaadin-grid-sort-column >

        <vaadin-grid-column width="6em" .renderer="${this._boundEditButtonRender}"></vaadin-grid-column>
      </vaadin-grid>

        `;

    }

这是我的回复示例

{"ResultList":[{"Id":"883","PolicyOcc_No":"01P168","CompanyBranch":"0","PurgeDate":"11/31/2019","ScanDate":"","Roll":"1057","Frame":"8","PolicyNo":" ","FileName":"cl.csv"},{"Id":"667","PolicyOcc_No":"01P78168/06","CompanyBranch":"01","PurgeDate":"12/31/2006","ScanDate":"05/19/2006","Roll":"452","Frame":"5","PolicyNo":"01P168","FileName":"cl.csv"}]}

如果我取出 mode: 'no-cors' 然后我得到这些错误。

Answer 1

documentation for `no-cors 表示

In addition, JavaScript may not access any properties of the resulting Response.

这就是 不透明 结果的含义。因此，当错误消息说如果不透明的结果符合您的需要时使用 no-cors，它实际上不符合您的需要，因为它不可读。

也许有帮助。

我如何使用 fetch 填充 vaadin-grid？

How did I populate vaadin-grid with fetch?

javascript

fetch

vaadin

vaadin-grid

lit-element