组件更新

Question

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

它适用于 css 更新，例如"$：cssColorValue = calcRandomColor(("，但如果我使用数组例如"$：values = [...新值]'

<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 的反应性是由赋值触发的，因此使用推送和拼接等数组方法不会自动导致更新。例如，单击该按钮不会执行任何操作。

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

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