Блог

Используя svelte, мне нравится фиксировать значение (например, цену автомобиля) при нажатии кнопки в #каждом блоке, чтобы передать его другому компоненту.

Пример кода:

 <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)
 

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

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

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

 <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);
 

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

 <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>