我正在编写 Svelte 项目,其中有 Message 组件,该组件代表一些js对象。
可以编辑该对象。为此,我愿意使用两个嵌套组件 MessageEditable 和 MessageReadable 。
它们应该相互替换,具体取决于消息组件的状态。
问题是,当我尝试保存编辑和 通过将 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>
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>
答案 0 :(得分:0)
使用方法可能比自定义事件处理程序更好,因为您要对提交执行操作。我在REPL中测试了此代码,但没有遇到错误。我将您的事件更改为methods属性,并删除了节点功能。
class RootViewController: UISplitViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewWillAppear(_ animated: Bool) {
self.preferredDisplayMode = UISplitViewControllerDisplayMode.allVisible
UINavigationBar.appearance().barTintColor = UIColor(red: 0.05, green: 0.14, blue: 0.38, alpha: 1)
UINavigationBar.appearance().titleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.white]
UIBarButtonItem.appearance().setTitleTextAttributes([NSAttributedStringKey.foregroundColor: UIColor.white], for: .normal)
}
@objc func displayTableView(notification: NSNotification) {
self.maximumPrimaryColumnWidth = 320
self.preferredDisplayMode = UISplitViewControllerDisplayMode.allVisible
}
@objc func hideTableView(notification: NSNotification) {
self.preferredDisplayMode = UISplitViewControllerDisplayMode.primaryHidden
}
https://svelte.technology/repl?version=2.10.0&gist=d4c5f8e3864856d27a3aa8cb5b2e8710