V-Model

[thejams]

Hi excelent library, i have only one question, how can i associate the content of the editor to a v-model

[bogdandjukic]

I need data binding too. Can't do it right now, except using a button to set the value from the editor to a {{model}}

[thejams]

and how do you get the value from the editor ? the idea of the button its not that bad actually

[bogdandjukic]

You can get the content from it with it's "getContent()" function.

You can set a "ref" on your Vueditor like so:

<Vueditor ref="editor"/>

Add a click function to your button:

<v-btn @click="loadText">

Add a method:

methods: {
    loadText() { 
        return this.$refs.editor.getContent();
    }
}

[thejams]

Thank you very much, it worked that way, until data binding is available this is the best option, just save my day

[cvsraghava]

Hi @thejams & @bogdandjukic ,

Yes, when I am using one component its working as expected.

But on same page I have following two editors, at that time same content is appending for two editors. Can you please suggest.

<template>
  <div>
    <no-ssr placeholder="loading...">
      <Vueditor ref="editor1"  ></Vueditor>
    </no-ssr>
      <br/>
        <no-ssr placeholder="loading...">
      <Vueditor ref="editor2" ></Vueditor>
    </no-ssr>
      <br/>
      <a @click.prevent="showMetheContentOne">Load The Data Editor 1</a>
      <br/>
      <a @click.prevent="showMetheContentTwo">Load The Data Editor 2</a>
  </div>
</template>

<script>
  export default {  
    data () {
      return {
        content: '',
        config: {

        }  
      }
    },
    methods:{
      showMetheContentOne:function(){
          let rOne = this.$refs.editor1.getContent();
          this.$refs.editor1.setContent("Hello World One!")
          console.log(rOne+"One");
      },
      showMetheContentTwo:function(){
          let rTwo = this.$refs.editor2.getContent();
          this.$refs.editor2.setContent("Hello World Two!")
          console.log(rTwo+"Two");
      }
    }
  }
</script>

[bogdandjukic]

To be honest, we switched to another editor which supports v-model, so I stopped playing with this one. However, maybe @thejams could help you if he continued using this one.

[cvsraghava]

Thank you @bogdandjukic for the update. Another one what you are using, it will support for NuxtJS right? If so, can you please let me know that editor information.

@thejams Any luck for me on Vueditor.

[hifarer]

@cvsraghava hi, it's a bug and i need time to fixed it. at now you can use Vueditor.createEditor(selector, config) for each editor to avoid the problem, if vueditor does not meet your requirement, try other editors could be a solution, but not discuss them here please.

[thejams]

@cvsraghava sorry bro im only using 1 editor but i will check with two and try to see how can i help you

[bogdandjukic]

@cvsraghava I'm not sure about mine working with NuxtJS. In respect to the author of this editor, I won't write here which one I'm using, but just google "vue text editor" and you'll be able to find a few of them.

[cvsraghava]

Thank you guys for your valuable information.