How to bind content in Nuxt.js properly?

[XinwenCheng]

Hi,

I use this plugin in Nuxt.js, and it works. But the problem I met is content binding is not correct.

<script>
export default {
  data() {
    return {
      content: "Hello, world!",
      editorOptions: {
        toolbar: {
          buttons: [
            "bold",
            "italic",
            "underline",
            "quote",
            "h1",
            "h2",
            "h3",
            "h4",
            "h5",
            "unorderedlist",
          ],
        },
      },
    };
  },
};
</script>

<template>
  <medium-editor
    :content="content"
    :options="editorOptions"
  />
</template>

According to the official sample, if I use :content="content" to bind, it doesn't work, which means Hello, world! won't show up on the web page, and content won't be changed according to my input. I tried :value="content", it's the same. So I have to try v-modal="content", a little better, content could be changed according to my input, but Hello, world! still won't show up when this page is just loaded.

[manuelgeek]

@XinwenCheng sorry, I'm updating the documentation - you should use v-model='content'

[XinwenCheng]

Hi @manuelgeek , I think you should not close this issue so quickly. I misspelled 'v-model' in my post, and actually, I do use v-model='content' in my code, but as I said, the value I set to content in data(){} block won't be shown in medium-editor, but content can be changed if I type anything in medium-editor.

Did you check this?

[manuelgeek]

@XinwenCheng you should use prefill prop to pass default value, not through v-model

[XinwenCheng]

@manuelgeek , thanks! And I have one more quick question.

I use :prefill='content', and the initial value of content is shown, but content won't be changed after I input something in the editor. So I have to use v-model='content' as well, and content can be changed. But once I use prefill and v-model at the same time, the direction of input will be reversed. For instance, I input a character at the end of a sentence, the cursor will always jump to the first position of that block, and if I input an enter, a new line will be the bottom of the current block, but the cursor will remain at the first position of the current block.

Is it wrong to use v-model?

[manuelgeek]

@XinwenCheng you can create a different variable from content eg defaultValue: your value. anytime you update, the content will have all the changes.
What you're tying to do, causes a loop in model updating prefill. The prefill should be set once and should not be changed from the v-model

[manuelgeek]

look at my example in App.vue

[XinwenCheng]

@manuelgeek I got it, thanks for your help!

[Mostafaproo]

how i can reset v-model='content' ?

[manuelgeek]

@Mostafaproo
content = '' should do the work
did you try that?
assuming content here is reactive or ref

[Mostafaproo]

@manuelgeek
yes i try this
but not remove conent from ui
when i check value in vue devtool it emepty
resetBlogForm() {
this.content = ''
},

[manuelgeek]

@Mostafaproo I'm working on task (#57) for 2 way data binding, to remove content from UI, prefill = '' should work for now
sorry for this

[Mostafaproo]

@XinwenCheng you can create a different variable from content eg defaultValue: your value. anytime you update, the content will have all the changes. What you're tying to do, causes a loop in model updating prefill. The prefill should be set once and should not be changed from the v-model

its work 👌