如何从Vue.js的父组件将数据传递到类星体轻敲编辑器中？

问题描述

我有点困惑如何在应用程序中使用它作为组件。具体来说，我很困惑如何正确地将数据从父组件传递到https://github.com/donotebase/quasar-tiptap的<quasar-editor />。

下面的代码将我父组件中episode.keyLessons的数据传递到编辑器中。但是，当我尝试输入编辑器时，空格键不会注册。如果光标位于顶部的<h1>部分中，并且按了任意键，则无需我单击即可将光标立即跳转到编辑器的<p>部分。

我在做什么错了？

我尝试过的事情：

Editor.vue

<template>
  <div>
    <quasar-tiptap v-bind="options" @update="onUpdate" />
  </div>
</template>

<script>
import { QuasarTiptap,RecommendedExtensions } from "quasar-tiptap";
import "quasar-tiptap/lib/index.css";

export default {
  name: "Editor",props: ['value'],data() {
    return {
      options: {
        content: '',editable: true,extensions: [
          ...RecommendedExtensions
          // other extenstions
          // name string,or custom extension
        ],toolbar: [
          "add-more","separator","bold",// other toolbar buttons
          // name string
        ]
      },json: "",html: ""
    };
  },components: {
    QuasarTiptap
  },methods: {
    onUpdate({ getJSON,getHTML }) {
      this.json = getJSON();
      this.html = getHTML();
      this.$emit('update',this.html)
    }
  },watch: {
    value: {
      handler(newVal,oldVal) {
        this.options.content = newVal;
        console.log(`value changed: ${newVal}`);
      },immediate: true
    }
  },mounted() {
    // set language dynamically
    this.$o.lang.set("en-us");
  }
};
</script>

Parent.vue

<template> 
   <Editor v-model="episode.keyLessons" @update="update" />
</template>

<script>
data: () => ({
   episode: {
      keyLessons: null,}
}),methods: {
   update(value) {
         this.episode.keyLessons = value;
       },}
</script>

解决方法

当您键入内容时，您也在重置内容，这可能是行为异常的原因。最好让窃听处理更新，并且仅在内容（值）从外部（父组件）更改时设置窃听的内容。在大多数情况下，您只想初始设置内容。

这是我建议您这样做的方式：

export default {
  name: "Editor",props: ['value'],data() {
    return {
      valueChangedFromEditor: false,options: {
        content: '',editable: true,extensions: [
          ...RecommendedExtensions
          // other extenstions
          // name string,or custom extension
        ],toolbar: [
          "add-more","separator","bold",// other toolbar buttons
          // name string
        ]
      },json: "",html: ""
    };
  },components: {
    QuasarTiptap
  },methods: {
    onUpdate({ getJSON,getHTML }) {
      this.valueChangedFromEditor = true;
      this.json = getJSON();
      this.html = getHTML();
      this.$emit('update',this.html)
    }
  },watch: {
    value: {
      handler(newVal,oldVal) {
        // Only update if the value changed from parent component.
        if (!this.valueChangedFromEditor) {
          this.options.content = newVal;
          console.log(`value changed: ${newVal}`);
        }
        this.valueChangedFromEditor = false;
      },immediate: true
    }
  },mounted() {
    // set language dynamically
    this.$o.lang.set("en-us");
  }
};