Question

只是和Svelte玩耍。而且我注意到，当计算反应式语句（$）时，如果未定义因变量之一，它将引发错误。

虽然此行为是正确的，但如何防止它计算所依赖的变量是否未定义？

要查看该错误，请在任一字段中键入内容，然后将其删除，使其变为空。

<script>
    let num = "";
    let secondNum = "";

    $: output = "prefix" + num.toString() + secondNum.toString() + "suffix";

    function handleChange() {
        console.log(num, secondNum);
    }

    function handleSubmit(e) {
        e.preventDefault();

    }

</script>
<form on:submit={handleSubmit}>
    <input type="number" bind:value={num} on:change={handleChange}>
    <input type="number" bind:value={secondNum} on:change={handleChange}>
    <button type="submit">
        Submit
    </button>
</form>

Answer 1

清除数字输入将导致其绑定值为undefined。如果num.toString()未定义（这是JavaScript而不是Svelte），则num是错误。

最简单的解决方法是：

$: output = `prefix${num || ''}${secondNum || ''}suffix`;

反应性语句命中未定义的变量后将引发错误。如何预防呢？

1 个答案: