在Vue 3中使用V-模型和<script setup>的提示

Question

我试图在Vue.js中使用tiptap和创建单个文件组件的<script setup>方法。

TextEditor.vue

<template>
  <editor-content :editor="editor" class="editor" />
</template>

<script lang="ts" 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({
  content: props.modelValue,
  extensions: [StarterKit],
  onUpdate: ({editor}) => {
    let content = editor.getHTML()
    emit('update:modelValue', content)
  }
})
</script>

然后，我像这样使用这个组件：

<template>
  <text-editor v-model="myModel.content" />
</template>

这在定义<text-editor>之后加载myModel.content时起作用。

但是，如果在从我的数据库API设置<text-editor>之前加载myModel.content，那么文本内容仍然是空的。通过查看tiptap文档中的示例，我了解到，当使用以下内容更改watch时，需要使用editor来更新props.modelValue：

watch(() => props.modelValue, (newValue, oldValue) => {
  const isSame = newValue === oldValue
  console.log(`Same: ${isSame}`)
  if (isSame) {
    return
  }
  editor.commands.setContent(newValue, false)
})

但是，在上面的片段中，editor是一个ShallowRef类型，没有引用commands来调用setContent。

当使用<script setup>方法加载提示时，获得上述示例的最佳方法是什么？

Answer 1

您需要使用.value访问ref实际值。

editor.value?.commands.setContent('<p>test</p>', false)