0

我正在尝试在值更改时触发组件更新

它适用于 css 更新，例如 '$: cssColorValue = calcRandomColor()' 但如果我使用数组，例如 '$: 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 等数组方法不会自动导致更新。例如，单击按钮不会执行任何操作。

解决这个问题的一种方法是添加一个原本多余的分配：

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