0

値の変更時にコンポーネントの更新をトリガーしようとしています

「$: cssColorValue = calcRandomColor()」などの CSS 更新では機能しますが、「$: values = [...newValues]」などの配列を使用している場合は機能しません。


<script>
  import Chip from "./Chip.svelte";
  import st from "../style-config.js";
  export let width = st.chip_bar.width;
  export let height = st.chip_bar.height;
  let border = st.chip_bar.border;
  export let center = false;
  export let color = "";
  export let cl = "";
  export let close = true;
  export let values = [];
  export let disabled = "";
  let value = "";

  function add_value(event) {

    if (event.code === "Enter") {
      values.push(value);
      console.log(values);
      value=''
    }
  }

  function remove_value(e) {
    console.log(e);
    var index = values.indexOf(e.value);
    if (index > -1) {
      arr.splice(index, 1);
    }
  }

  $: input_style = ` text-black w-auto h-auto font-medium ml-1 outline-none ${cl}`;

  $: chip_bar_style = ` ${
    st.round
  } text-black w-${width} h-${height} text-middle ${
    border ? "border" : ""
  } outline-none ${st.shadow} ${
    st.chip_bar.border
  } pl-1 pr-1 pt-1 pb-1 inline-block ${cl}`;
</script>

<div class="{chip_bar_style} on:hover={st.chip_bar.focus}">
  {#each values as text}
    <Chip {text} on:click={remove_value} />
  {/each}
  <input
    type="text"
    class={input_style}
    bind:value
    on:keydown={add_value}
    {disabled} />
</div>

私が望むのは、Svelte が for each ループを再レンダリングすることです。

4

1 に答える 1

0

公式ドキュメントからのコピペ

Svelte の反応性は代入によってトリガーされるため、push や splice などの配列メソッドを使用しても自動的に更新されることはありません。たとえば、ボタンをクリックしても何も起こりません。

これを修正する 1 つの方法は、そうでなければ冗長になる代入を追加することです。

    function addNumber() {
        numbers.push(numbers.length + 1);
        numbers = numbers;
    }

しかし、より慣用的な解決策があります。

    function addNumber() {
        numbers = [...numbers, numbers.length + 1];
    }

同様のパターンを使用して、pop、shift、unshift、および splice を置き換えることができます。

obj.foo += 1 や array[i] = x などの配列とオブジェクトのプロパティへの代入は、値自体への代入と同じように機能します。

    function addNumber() {
        numbers[numbers.length] = numbers.length + 1;
    }
于 2019-10-03T16:54:39.373 に答える