Нажатие нового элемента в массиве заменяет последний элемент в подсвеченном html - PullRequest
Новая
       90

Нажатие нового элемента в массиве заменяет последний элемент в подсвеченном html

0 голосов
/ 06 августа 2020

Я пытаюсь создать список динамических c в lit- html, но я не могу понять, когда вставляю новый элемент в массив, старый элемент каким-то образом заменяется, и DOM обновляет этот элемент вместо добавления новый элемент списка.

Я пробовал несколько раз с множеством разных реализаций, но всегда результат один и тот же. 

import { html, render } from 'lit-html';


const dataMain = {
  running: false,
  status: '',
  tags: [],
};




const chipsFunc = (tags) => {
  return tags.map((t, i) => html`
  <li class="">
    <div class="chip">${t}
      <span class="close" @click="${tags.splice(i, 1)}">&times;</span>
     </div>
  </li>`);
}

function card(data) {
  console.log(data.tags);
  const chips = chipsFunc(data.tags);
  return html`
  <div class="card">
  <div class="card-header d-flex align-items-center header">
<div class="image">
  ${data.running !== 'loading' ?
      html` <img src="../images/logo-38.png" class="mr-2 icon">` :
      html`<img src="../images/loader.svg" class="mr-2 icon">`
    }
  </div>
    ${!data.running ?
      `Extension` :
      html`${status}`
    }
 <div class="actions d-flex">
 <button type="button" class="btn">
   <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-three-dots" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
</svg></button>
  </div>
  </div>
  <div class="card-body" >
  <ul class="d-flex form-control list-inline">
  ${chips}
<li>
  <input type="text" class="form-control" id="add-tag" placeholder="Add Tag" @keyup="${e => addTag(e)}">
  </li>
  </ul >
  </div >
  `;
}
function addTag(e){
  if (e.key === 'Enter') {
    dataMain.tags.push(e.target.value);
    // e.target.value = "";
    render(card(dataMain), document.body);
  }
}

render(card(dataMain), document.body);

Пожалуйста, помогите мне понять, как я могу заставить его работать.

...