CODEWITHSUNDEEP
javascriptbindsvelte
MNITD
MNITD

Reputation: 13

Svelte: Replace nested component by changing binded variable

I am writing Svelte project, where I have Message component which represents some js object.

There is ability to edit this object. For this purpose I desided to use two nested component MessageEditable and MessageReadable.

They should replace each other, depending on Message component state.

The problem is that when I am trying to save result of editing and change MessageEditable to MessageReadable by setting isEditing property to false I get error:

image of error from console

Did I make a mistake or this is normal behavior? Is binding a good approach or there is more optimal for exchanging of values with parent components?

Message:

<div class="message">

    {#if isEditing}
    <MessageEditable bind:message bind:isEditing />
    {:else}
    <MessageReadable {message}/>
    {/if}

    <div class="message__controllers">
        <button on:click="set({isEditing: true})">Edit</button>
    </div>
</div>

<script>
    import MessageEditable from './MessageEditable.html';
    import MessageReadable   from './MessageReadable.html';

    export default {
        components:{
            MessageEditable,
            MessageReadable,
        },
        data:() => ({
            message:{
              id: '0',
              text: 'Some message text.'
            },
            isEditing: false,
        }),

    }
</script>

MessageEditable:

<form  class="message-editable" on:submit>
    <label><span >text</span><input  type="text"  bind:value=message.text required></label>
    <label><span>id</span><input  type="text" bind:value=message.id required></label>
    <div><button type="submit">Save</button></div>
</form>

<script>
    export default {
        events:{
            submit(node){
                node.addEventListener('submit', (event) => {
                   event.preventDefault();

                   this.set({isEditing: false});
                });
            },
        },
    };
</script>

MessageReadable:

<div class="message-readable">
    <p><span>text: </span>{message.text}</p>
    <p><span>id: </span>{message.id}</p>
</div>

Upvotes: 1

Views: 1500

Answers (1)

Andrew Smith
Andrew Smith

Reputation: 1831

Its probably better to use a method than a custom event handler since you are performing actions on submit. I tested this code in the REPL and didn't experience the error you are getting. I changed your events to a methods property and removed the node functionalities.

<form  class="message-editable" on:submit="save(event)">
    <label><span >text</span><input  type="text"  bind:value=message.text required></label>
    <label><span>id</span><input  type="text" bind:value=message.id required></label>
    <div><button type="submit">Save</button></div>
</form>

<script>
    export default {
        methods: {
            save(event){
                event.preventDefault();
                this.set({isEditing: false});
            },
        },
    };
</script>

https://svelte.technology/repl?version=2.10.0&gist=d4c5f8e3864856d27a3aa8cb5b2e8710

Upvotes: 0

Related Questions