元素未更新 html Polymer V3 上的值

element not updating value on html Polymer V3

我想在使用 AddItem() 方法在 child 中添加新项目后更新 PARENT COMPONENT 中的 todoList。第一次没有添加任何东西。 前任。如果我添加 "take test" 不会被渲染,那么如果我添加 "take shower" 不会被渲染但现在 "take test" 会。然后如果我添加 "take a leak" "take shower" 得到渲染。

PARENT 组件

firstUpdated(changedProperties) {
    this.addEventListener('addItem', e => {
      this.todoList = e.detail.todoList;
    });
  }

  render() {
    return html`
      <p>Todo App</p>
      <add-item></add-item>//Child item that triggers the add
      <list-items todoList=${JSON.stringify(this.todoList)}></list-items>
    `;
  }

CHILD 组件

AddItem() {
    if (this.todoItem.length > 0) {
      let storedLocalList = JSON.parse(localStorage.getItem('todo-list'));
      storedLocalList = storedLocalList === null ? [] : storedLocalList;
      const todoList = [
        ...storedLocalList,
        {
          id: this.uuidGenerator(),
          item: this.todoItem,
          done: false
        }
      ];

      localStorage.setItem('todo-list', JSON.stringify(todoList));
      this.dispatchEvent(
        new CustomEvent('addItem', {
          bubbles: true,
          composed: true,
          detail: { todoList: storedLocalList }
        })
      );
      this.todoItem = '';
    }
  }

  render() {
    return html`
      <div>
        <input .value=${this.todoItem} @keyup=${this.inputKeyup} />
        <button @click="${this.AddItem}">Add Item</button>
      </div>
    `;
  }

您需要为 todoItem

设置 properties

static get properties() {

  return { 
    todoItem: {
    type: Array, 
    Observer: '_itemsUpdated' 
    }
  }
  constructor(){ 
    this.todoItem = [] 
  }
  _itemsUpdated(newValue,oldValue){
  if(newValue){
    -- write your code here.. no event listeners required
    }
  }

在上面的代码中,我们需要初始化 constructor 中的空数组。

Observer 观察数组的变化并触发 itemsUpdated 带有 oldValue 和 NewValue 的函数。在那个函数中,你可以放置你的逻辑。

根据我的假设不需要事件侦听器

发现我的错误。我传递给 detail: { todoList : storedLocalList } 这是没有更新值的旧数组。

 AddItem() {
        if (this.todoItem.length > 0) {
          let storedLocalList = JSON.parse(localStorage.getItem('todo-list'));
          storedLocalList = storedLocalList === null ? [] : storedLocalList;
          const todoList = [
            ...storedLocalList,
            {
              id: this.uuidGenerator(),
              item: this.todoItem,
              done: false
            }
          ];

          localStorage.setItem('todo-list', JSON.stringify(todoList));
          this.dispatchEvent(
            new CustomEvent('addItem', {
              bubbles: true,
              composed: true,
              detail: { todoList: todoList }
            })
          );
          this.todoItem = '';
        }
      }