Неверное значение возвращается при получении значения из магазина - PullRequest
Новая
       8

Неверное значение возвращается при получении значения из магазина

0 голосов
/ 24 сентября 2019

У меня есть компонент, который отображает набор кнопок:

Компонент пошагового навигатора

Для каждого нажатия кнопки я хочу отобразить другой вид и установитьтекущий вид в «шаге» - переменная.Поскольку я не хочу получать доступ к этой переменной из разных компонентов в моем приложении, я храню эту переменную "step" в магазине.

Я извлекаю значение из атрибута данных, из которого я установилкогда я отображаю список:

StepNavigator.svelte 

<script>
  import { step } from "../stores/step.js";
  import { onMount } from "svelte";
  import Icon from "./Icon.svelte";

  function setStep(e) {
    step.update(n => e.target.tabIndex);
  }

  let stepItems = [
    {
      title: "Option 1",
      selections: []
    },
    {
      title: "Option 2",
      selections: ["One selection"]
    },
    {
      title: "Option 3",
      selections: []
    },
    {
      title: "Option 4",
      selections: ["Selection 1", "Selection 2"]
    },
    {
      title: "Option 5",
      selections: []
    },
    {
      title: "Option 6",
      selections: []
    }
  ];
</script>
<section class="step-navigator">
  <h2>Configure product item 1</h2>
  <p>Lorem ispum dolor samet dolor ipsum lorem samet.</p>
  <ul>
    {#each stepItems as stepItem, index}
      <li>
        <button class={$step === index ? 'active' : 'inactive'} on:click={setStep} tabindex={index}>
          <div>
            <h3>{stepItem.title}</h3>
            <div class="selected-items">
              {#if stepItem.selections.length > 0}
                {#each stepItem.selections as selection, index}
                  {#if index !== 0}, {selection}{:else}{selection}{/if}
                {/each}
              {:else}Nothing selected{/if}
            </div>
          </div>
          <Icon iconType="ok" iconColor={stepItem.selections.length > 0 ? 'var(--theme-color--success)' : '#999'} strokeWidth="4" />
        </button>
      </li>
    {/each}
  </ul>
  <div class="price-container">
    <div class="price">7560 USD</div>
    <div class="price-information">Disclaimer text goes here</div>
  </div>
</section>

Step.js 

import { writable } from 'svelte/store';

export const step = writable(0);

Вещиэто то, что я случайно получаю значение «-1» при нажатии моих кнопок:

GIF, показывая ошибку при нажатии кнопок

Почему это происходит?Что я тут не так делаю?

1 Ответ

0 голосов
/ 25 сентября 2019

Я согласен, странно, что ваши индексы вкладок возвращаются как -1, даже если вы, кажется, устанавливаете их правильно.

Но вместо использования tabIndex в setStep я мог быпросто передайте индекс напрямую, вот так: 

function setStep(index) {
  step.update(n => index);
}

<button class={$step === index ? 'active' : 'inactive'} on:click={() => setStep(index)} tabindex={index}>

Вот Svelte REPL для этого: https://svelte.dev/repl/b70ed5be24074cf48c3d3e6a375c327e?version=3.12.1

Примечание, но также, если выесли не использовать эту переменную n, то может быть немного чище использовать set вместо update: 

function setStep(index) {
  step.set(index);
}
...