Question

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

它适用于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为每个循环重新渲染

Answer 1

从官方文档中复制

由于Svelte的反应性是由分配触发的，因此使用诸如push和splice的数组方法不会自动导致更新。例如，单击按钮不会执行任何操作。

一种解决方法是添加一个分配，否则该分配将是多余的：

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

但是还有一个惯用的解决方案：

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

您可以使用类似的样式来替换弹出，移位，取消移位和拼接。

分配给数组和对象的属性-例如obj.foo + = 1或array [i] = x —与对值本身进行分配的方式相同。

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

组件更新

1 个答案: