Svelte - извлекает значение из каждого блока и передает функцию

Используя 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)

Но это мне не помогает, потому что мне действительно нужно вызвать и запустить функцию, которая может передать это значение.

Любые предложения приветствуются!


svelte svelte-component
person Tarek    schedule 29.12.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Мне нравится использовать функции высшего порядка для выполнения таких задач:

<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);
person Connor Low    schedule 29.12.2020
comment
Это здорово, спасибо! - person Tarek; 01.01.2021

arrow_upward
0
arrow_downward

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

<script>
    let selectedPrice;
    const cars = [
        {
            name: 'car 1',
            price: '2000'
        },
        {
            name: 'car 2',
            price: '4000'
        }
    ]
    
    function handlePriceSelection(newPrice) {
        selectedPrice = newPrice;
        // do whatever else you need to with the new price
    }
</script>

{#each cars as car}
    <button on:click={() => handlePriceSelection(car.price)}>
        {car.name} (${car.price})   
    </button>
{/each}

<div>
    Selected price: {selectedPrice}
</div>
person Geoff Rich    schedule 29.12.2020
comment
Отлично! Большое спасибо! - person Tarek; 01.01.2021