LitElement框架下通过事件修改属性后文本输入框（input type="text"）值未更新问题

我帮你定位到了两个核心问题，正是它们导致输入框value无法同步更新：

1. 未在LitElement的属性声明中注册text属性 #

LitElement只会对在static get properties()里声明的属性进行变化监听，当这些属性值改变时，才会自动触发组件重渲染，更新对应的DOM内容。你现在只是在constructor里初始化了this.text，但没把它加入静态属性列表，所以修改this.text后，框架根本不知道需要更新输入框的value。

修复方法：在static get properties()中添加text属性的声明：

static get properties() {
  return {
    src: { type: String },
    items: { type: Array },
    text: { type: String } // 新增这一行
  }
};

2. 点击事件的绑定方式错误 #

你当前的列表项点击事件写的是@click="${this.selectItem(item)}"，这会在组件首次渲染的时候直接执行selectItem(item)函数，而不是在用户点击时才触发。相当于你把selectItem(item)的执行结果（undefined）绑定给了click事件，自然点击时不会有任何反应。

修复方法：用箭头函数包裹，确保点击时才调用目标函数并传递参数：

${this.items.map((item) => html`<li @click="${() => this.selectItem(item)}">${item.text}</li>`)}

完整修复后的代码 #

import { LitElement, html, css } from '../vendor/lit-2.4.0/lit-all.min.js';
export class SearchInput extends LitElement {
  static get properties() {
    return {
      src: { type: String },
      items: { type: Array },
      text: { type: String } // 新增属性声明
    }
  };
  static styles = css` `;
  constructor() {
    super();
    this.items = [
      { text: 'Hola' },
      { text: 'mundo!' }
    ];
    this.selectedItem = null;
    this.text = 'foo';
  }
  selectItem(item) {
    this.selectedItem = item;
    this.text = this.selectedItem.text;
  }
  render() {
    return html`
      <div class="control">
        <input class="input" type="text" value="${this.text}">
        <ul class="result-list">
          ${this.items.map((item) => html`<li @click="${() => this.selectItem(item)}">${item.text}</li>`)}
        </ul>
      </div>
    `;
  }
}
customElements.define('search-input', SearchInput);

现在你再测试一下，点击列表项后，输入框的value应该会同步更新为选中项的文本了。

内容的提问来源于stack exchange，提问作者Pedro Urday