时间戳

首页 > 解决方案 > Svelte 每个块只渲染最后一项

javascript - Svelte 每个块只渲染最后一项

问题描述

我正在尝试在 svelte 中制作标签输入组件，但遇到了奇怪的#each块行为。我有以下苗条的代码

<script>
  import Input from './Input.svelte'
  import Tag from './Tag.svelte'

  export let tagValues = []
  let currentTag = ''

  function handleEnter({ key }) {
    if (key === 'Enter' && currentTag) {
      if (tagValues.indexOf(currentTag) < 0) {
        tagValues = [...tagValues, currentTag]
      }
      currentTag = ''
    }
  }
</script>

<div class="relative">
  <Input bind:value={currentTag} on:keyup={handleEnter}></Input>
  {#each tagValues as t (t)}
    <Tag value={t}></Tag>
  {/each}
  {JSON.stringify(tagValues, null, 2)}
</div>

这个想法是在用户点击 Enter 键时获取输入值，如果该值尚不存在，则将该值添加为标签。Input组件的行为与inputHtml 元素相同。Tag组件只有一个value文本属性，它应该呈现tagValues数组的所有值，但只显示最后一个。我可以确认该数组包含正确的新标签，因为我将它的字符串化版本粘贴到 HTML。这是 1 个标签的样子

渲染一个标签

这是有两个标签

呈现的两个标签

我怎样才能让这个组件呈现所有标签？我试图让我的每个块都被键入，但没有任何改变。

标签： javascriptsveltesvelte-3

解决方案

推荐阅读