没有在 litElement 的输入字段中触发 OnChange

Question

我有以下代码：

export class ViTextfield extends LitElement 
{
static get properties() {
    return { 
        value: { type: String }, 
  }

 onChange(e) { console.log(e.target.value) }

 render()
{
    return html`
    <div>

        <div>
            <input id="vi-input" 
                type="text" 
                value="${this.value}"
                @change=${this.onChange} />
        </div>
    </div>
        `
}

因此一切正常。现在使用我的组件的开发人员应该能够通过属性设置值，例如

  document.getElementById('myComponent').value = 1;

现在带来了两个问题： 1) 值本身没有更新 2) onchange 没有被触发

问题 1 我通过更改

解决了

value="${this.value}"

到

.value="${this.value}"

连我都不知道它为什么起作用（在网上找到了这个 hack）。

但是 onChange 仍然没有触发...

Answer 1

由于以下原因，代码无法按您预期的方式运行：

为什么 value 不起作用而 .value 起作用？

lit-html这里用点来区分赋值属性还是属性（value赋值属性，.value属性)

考虑这一点的最简单方法是，属性是在 HTML 本身上设置的属性，属性设置为代表该节点的 Javascript 对象。

现在，这在这种情况下很重要，因为输入元素的值属性仅在首次呈现时根据属性设置，如果您想稍后更改它，则必须设置属性，不是属性。 Source

当值属性从代码更改时，为什么不触发更改事件？

这是因为仅当输入的值因某些用户输入而发生更改时，才会从输入触发更改事件。 Source

如果你想要某种副作用，不仅在用户输入交互时触发，而且在代码中修改属性时触发，你可能想使用 setter。在你的情况下，它看起来像这样：

export class ViTextfield extends LitElement {
  static get properties() {
    return {
      value: {
        type: String
      },
    }
  }

  set value(value) {
    const oldValue = this.value;
    // do some side effect here        
    // set a pseudo-private property that will contain the actual value
    this._value = value;
    // call LitElement's requestUpdate so that a rerender is done if needed
    this.requestUpdate('value', oldValue);
  }

  get value() {
    // return the pseudo-private so that when vitextfield.value is accessed the correct value is returned
    return this._value;
  }

  onChange(e) {
    // update the property so that it keeps up with the input's current value
    this.value = e.target.value;
  }

  render() {
    return html `
    <div>
        <div>
            <input id="vi-input" 
                type="text" 
                value="${this.value}"
                @change=${this.onChange} />
        </div>
    </div>
        `
  }
}

更多信息请查看this part of the LitElement guide

没有在 litElement 的输入字段中触发 OnChange

OnChange not fired in input field of litElement

javascript

web-component

lit-element