Svelte - changing a bound value in a click handler doesn't seem to update it

Question

I have a simple demo app of binding an input using Svelte. This works, but during a click handler on that same element, I wish to reset the bound value.

Specifically I have bound an input to draftMessage and would like to set draftMessage back to an empty string after the message is submitted:

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

There is a live demo here

How can I change a bound value in a click handler?

mikemaccana · Accepted Answer · 2019-05-17 15:09:10Z

3

You forgot bind:, so the value of draftMessage never actually changes, so draftMessage = '' has no effect. You have a couple of options:

Do <input bind:value={draftMessage}> so that by the time you hit that line, draftMessage has a value other than the empty string. (You can now use that value instead of querying the DOM — previousMessages = [...previousMessages, draftMessage]). Demo here
Skip draftMessage entirely, and use the DOM throughout (input.value = ''). Demo here

edited May 17, 2019 at 15:09

mikemaccana

126k113 gold badges441 silver badges544 bronze badges

answered May 16, 2019 at 17:19

Rich Harris

29.8k3 gold badges92 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Svelte - changing a bound value in a click handler doesn't seem to update it

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related