2

我正在编写Svelte项目，其中我有代表一些 js 对象的Message组件。

可以编辑此对象。为此，我决定使用两个嵌套组件MessageEditable和MessageReadable。

它们应该相互替换，具体取决于Message组件的状态。

问题是，当我尝试通过将isEditing属性设置为 false来保存编辑结果并将MessageEditable更改为MessageReadable时，出现错误：

来自控制台的错误图像

我犯了错误还是这是正常行为？绑定是一种好方法，还是有更优化的与父组件交换值的方法？

信息：

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

消息可编辑：

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

消息可读：

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

1 回答 1

1

由于您在提交时执行操作，因此使用方法可能比使用自定义事件处理程序更好。我在 REPL 中测试了这段代码，没有遇到您遇到的错误。我将您的事件更改为方法属性并删除了节点功能。

<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

于 2018-08-12T20:51:40.270 回答