render() -函数没有更新DOM - lit-html

Question

我有一个关于lit html渲染函数的问题。目前我有一个问题，有时渲染函数不会更新DOM。

我的渲染函数如下所示：

public renderLootbag = (_characterItems: Object): void => {
  //some other code
  const lootbagInventoryTemplate: TemplateResult[] = [];

  for (let i: number = 0; i < numberOfInventorySpaces; i++) {
    lootbagInventoryTemplate.push(html` 
      <section class="lootbag__inventoryItem">
      //some other code 
      </section>
    `)
  };

  const lootbagTemplate: TemplateResult = html`
    //some other code
    <section class="lootbag__inventory">${lootbagInventoryTemplate} 
    </section>
  `;

  console.log(lootbagInventoryTemplate);
  render(lootbagTemplate, getLootbagContainer);
}

每当我点击一个叫做"open Lootbag“的按钮时，这个函数就会被触发。

现在的问题是:如果renderLootbag()函数中的参数值发生变化，DOM不会更新，即使console.log(lootbagInventoryTemplate)显示了新值... :/。

img of the console.log

img of the dom

注意:在这种情况下，类为"lootbag__itemData“的元素不应该填充内容。

有没有办法完全强制一个新的渲染?我已经尝试过用innerHTML清空我的容器，然后调用渲染函数，但是没有起作用。

提前感谢

Answer 1

我也遇到过类似的问题，输入并不总是更新。令人不快的问题是，我将来自用户的所有输入转换为数字，如果用户键入一些字母，它将恢复为零。因为这些值并不总是改变的(0变成了0)，lit html不会重新渲染。

解决方案是使用指令。

import { html, render, directive } from "lit-html";

const value = store.savedValueFromInput;

const forceWrite = directive((someValue) => (part) => {
        part.setValue(someValue);
    });

<input type="number" @change="${setValueFromInput}" .value="${forceWrite(value)}" />

这应该会强制重新渲染。

致以最好的问候，特里斯坦