diff --git a/examples/Components/Routes/Embeds/Iframe.js b/examples/Components/Routes/Embeds/Iframe.js
index 63141242..cf90c77e 100644
--- a/examples/Components/Routes/Embeds/Iframe.js
+++ b/examples/Components/Routes/Embeds/Iframe.js
@@ -32,24 +32,22 @@ export default class Iframe extends Node {
get view() {
return {
props: ['node', 'updateAttrs', 'editable'],
- data() {
- return {
- url: this.node.attrs.src,
- }
- },
- methods: {
- onChange(event) {
- this.url = event.target.value
-
- this.updateAttrs({
- src: this.url,
- })
+ computed: {
+ src: {
+ get() {
+ return this.node.attrs.src
+ },
+ set(src) {
+ this.updateAttrs({
+ src,
+ })
+ },
},
},
template: `
-
-
+
+
`,
}
diff --git a/packages/tiptap/src/utils/ComponentView.js b/packages/tiptap/src/utils/ComponentView.js
index 23045b74..09e56056 100644
--- a/packages/tiptap/src/utils/ComponentView.js
+++ b/packages/tiptap/src/utils/ComponentView.js
@@ -88,9 +88,14 @@ export default class ComponentView {
this.node = node
this.decorations = decorations
- // TODO: should be update props? maybe this is required for the collab plugin
- // this.vm._props.node = node
- // this.vm._props.decorations = decorations
+ // Update props in component
+ // TODO: Avoid mutating a prop directly.
+ // Maybe there is a better way to do this?
+ const originalSilent = Vue.config.silent
+ Vue.config.silent = true
+ this.vm._props.node = node
+ this.vm._props.decorations = decorations
+ Vue.config.silent = originalSilent
return true
}