[英]vue 3 script setup bind v-model to child custom component multiple checkbox
[英]How to bind TipTap to parent v-model in Vue 3 script setup?
我正在尝试将tiptap
用作子组件并将其内容传递给父级的v-model
,但tiptap 的文档似乎仅提供有关如何在没有script setup
的情况下执行此操作的信息,它使用不同的API。
这是我的parent
组件:
<template>
<cms-custom-editor v-model:modelValue="state.content"/>
<p>{{state.content}}</p>
</template>
<script setup>
import CmsCustomEditor from '../../components/backend/cms-custom-editor.vue'
import {reactive} from "vue";
const state = reactive({
content: '<p>A Vue.js wrapper component for tiptap to use <code>v-model</code>.</p>',
})
</script>
这是带有tiptap
的child
组件:
<template>
<div id="cms-custom-editor" class="cms-custom-editor">
<editor-content :editor="editor"/>
</div>
</template>
<script setup>
import {useEditor, EditorContent} from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
const props = defineProps({
modelValue: {
type: String,
default: ''
}
})
const emit = defineEmits(['update:modelValue'])
const editor = useEditor({
extensions: [StarterKit],
content: props.modelValue,
onUpdate: () => {
emit('update:modelValue', editor.getHTML())
}
})
</script>
一旦我在编辑器字段中输入内容,此代码行就会失败:
emit('update:modelValue', editor.getHTML())
并抛出此错误:
Uncaught TypeError: editor.getHTML is not a function
at Editor2.onUpdate (cms-custom-editor.vue?t=1654253729389:28:42)
at chunk-RCTGLYYN.js?v=89d16c61:11965:48
at Array.forEach (<anonymous>)
at Editor2.emit (chunk-RCTGLYYN.js?v=89d16c61:11965:17)
at Editor2.dispatchTransaction (chunk-RCTGLYYN.js?v=89d16c61:12252:10)
at EditorView.dispatch (chunk-RCTGLYYN.js?v=89d16c61:9138:27)
at readDOMChange (chunk-RCTGLYYN.js?v=89d16c61:8813:8)
at DOMObserver.handleDOMChange (chunk-RCTGLYYN.js?v=89d16c61:8924:77)
at DOMObserver.flush (chunk-RCTGLYYN.js?v=89d16c61:8575:12)
at DOMObserver.observer (chunk-RCTGLYYN.js?v=89d16c61:8455:14)
我使用了文档(第 5 章 v-model)中的方法,就像我说的那样,它不是为script setup
而设计的。
伙计,文档令人困惑。 他们混合了标准composition api
和script setup
。 无论如何,这就是它的工作原理:
const editor = useEditor({
extensions: [StarterKit],
content: props.modelValue,
onUpdate: ({editor}) => {
emit('update:modelValue', editor.getHTML())
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.