Vue.js 如何将数据从vuejs中的父组件传递到quasar tiptap编辑器？

我有点困惑如何在我的应用程序中使用它作为组件。具体来说，我对如何正确地将数据从父组件传递到源组件的

感到困惑

下面我的代码将把父组件中的

插曲.keyLessons

中的数据传递到编辑器中。但是，当我尝试在编辑器中键入时，空格键不会注册。如果光标位于顶部的

部分，并且按下任何键，则光标将立即跳到编辑器的

部分，而无需单击该部分

我做错了什么

我所尝试的：

编辑器.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>

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

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

从“类星体tiptap”导入{QuasarTiptap，推荐扩展}；
导入“quasar tiptap/lib/index.css”；
导出默认值{
姓名：“编辑”，
道具：['value']，
数据（）{
返回{
选项：{
内容：“”，
是的，
扩展：[
…建议的扩展
//其他扩展
//名称字符串或自定义扩展名
],
工具栏：[
“添加更多”，
“分隔符”，
“粗体”，
//其他工具栏按钮
//名称字符串
]
},
json:“”，
html:“
};
},
组成部分：{
准星
},
方法：{
onUpdate（{getJSON，getHTML}）{
this.json=getJSON（）；
this.html=getHTML（）；
this.$emit（'update'，this.html）
}
},
观察：{
价值：{
处理程序（newVal、oldVal）{
this.options.content=newVal；
log（`value changed:${newVal}`）；
},
立即：对
}
},
安装的（）{
//动态设置语言
本。$o.lang.set（“en-us”）；
}
};

Parent.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>

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

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

数据：（）=>({
插曲：{
keyLessons:null，
}
}),
方法：{
更新（值）{
this.eposion.keyLessons=值；
},
}

当您键入内容时，您也会重置内容，这可能是导致这种奇怪行为的原因。最好让tiptap处理更新，并且仅当内容（值）从外部（父组件）更改时才设置tiptap的内容。在大多数情况下，您只希望最初设置内容

我建议您这样做：

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");
  }
};

---

这正是我要找的。文档中应该包含此位。非常有用。非常好的解决方案，谢谢！