时间戳

首页 > 解决方案 > Svelte - 从#each 块中提取值并传入函数

svelte - Svelte - 从#each 块中提取值并传入函数

问题描述

使用 svelte 我喜欢在#each 块中按下按钮时捕获一个值（例如汽车价格），以便将其传递给另一个组件。

代码示例：

<script>
  import TeslaStore from "../stores/TeslaStore.js";

  const cars = $TeslaStore.filter((e) => e.name === "Model S");
</script>

{#each cars as car}<button>{car.label} {car.price}</button>{/each}

我知道，对于简单的提取，您可以使用 on:click 回调函数，例如：

on:click(() => price = car.price)

但这对我没有帮助，因为我实际上需要调用并运行一个可以传递该值的函数。

任何建议表示赞赏！

标签： sveltesvelte-component

解决方案

我喜欢使用高阶函数来完成这类事情：

<script>
  import TeslaStore from "../stores/TeslaStore.js";

  const cars = $TeslaStore.filter((e) => e.name === "Model S");

  // This creates a function for a specific car.
  const selectsCar = (car) => { /* ... do something with car.price ... */ }
</script>

{#each cars as car}
  <button on:click={selectsCar(car)}>{car.label} {car.price}</button>
{/each}

我实际上需要调用并运行一个可以传递该值的函数。

根据您要完成的工作（如果我对这个建议不满意，请道歉），您可以使用createEventDispatcher从 svelte 导出的组件“输出”这个值。

// Reworked from previous example:
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
const selectsCar = (car) => dispatch('select-car', car);

推荐阅读