slate-vue
slate-vue copied to clipboard
Cannot set property 'children' of undefined
<template>
<Slate :value="JSON.stringify(value)">
<Editable :renderLeaf="renderLeaf" :renderElement="renderElement">
</Editable>
</Slate>
</template>
<script>
import PageBox from "c/PageBox";
import { Slate, Editable } from "slate-vue";
export default {
components: { PageBox, Slate, Editable },
data() {
return {
value: [
{
type: "h1",
children: [{ text: "12121" }],
},
],
};
},
created() {
// console.log(this.value);
// this.$editor.children=this.value
// console.log(this.$editor);
},
methods: {
renderLeaf({ attributes, children, leaf }) {
return {
render() {
return <span {...{ attrs: attributes }}>{children}</span>;
},
};
},
renderElement({ attributes, children, element }) {
console.log({ attributes, children, element });
return {
render() {
return (
<div {...{ attrs: attributes }} element={element}>
{children}
</div>
);
},
};
},
},
};
</script>
<style>
</style>
main.js
import Vue from "vue";
import 'babel-polyfill'
import { SlatePlugin } from 'slate-vue';
import { withHistory } from 'slate-history'
Vue.use(SlatePlugin, {
editorCreated(editor) {
withHistory(editor);
},
});
...
So there was never an answer? Same problem here