元素未更新 html Polymer V3 上的值

Question

我想在使用 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>
    `;
  }

Answer 1

您需要为 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 的函数。在那个函数中，你可以放置你的逻辑。

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

Answer 2

发现我的错误。我传递给 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 = '';
        }
      }

元素未更新 html Polymer V3 上的值

element not updating value on html Polymer V3

javascript

polymer

polymer-3.x

lit-element