Svelte - 在点击处理程序中更改绑定值似乎不会更新它答案

【问题标题】：Svelte - changing a bound value in a click handler doesn't seem to update itSvelte - 在点击处理程序中更改绑定值似乎不会更新它
【发布时间】：2019-05-16 15:27:26
【问题描述】：

我有一个简单的 binding an input using Svelte 演示应用程序。这可行，但是在同一元素上的单击处理程序期间，我希望重置绑定值。

具体来说，我已将input 绑定到draftMessage，并希望在提交消息后将draftMessage 设置回空字符串：

<script>

    let draftMessage = '';

    let handleSendMessageClick = function(event){
        var message = event.target.form.querySelector('input').value
        previousMessages.push(message)
        previousMessages = previousMessages

        // Clear draftMessage
        console.log(`Clearing draftMessage - why doesn't this work?`)
        draftMessage = ''
    }

    let previousMessages = [];
</script>

<h1>Type some things</h1>

<form>
  <input value={draftMessage}/>
  <button on:click|preventDefault={handleSendMessageClick}>Send</button>
</form>

{#each previousMessages as message}
  <p>{message}</p>
{/each}

有一个live demo here

如何更改点击处理程序中的绑定值？

【问题讨论】：

标签： svelte

【解决方案1】：

你忘记了bind:，所以draftMessage 的值实际上永远不会改变，所以draftMessage = '' 没有任何作用。您有两种选择：

执行<input bind:value={draftMessage}> 以便在您点击该行时，draftMessage 的值不是空字符串。（您现在可以使用该值而不是查询 DOM — previousMessages = [...previousMessages, draftMessage]）。 Demo here
完全跳过draftMessage，并在整个过程中使用DOM (input.value = '')。 Demo here

【讨论】：