Eslint-plugin-vue: 'v-model' directives aren't supported on <div> elements ??

[be-next-hotdog]

Hello guys,

I got this problem right now as described on topic ? What should I config in addition ?

Thx for your help.

Tell us about your environment

• ESLint Version: v4.19.0
• eslint-plugin-vue Version: v4.3.0
• Node Version: v8.10.0

Please show your full configuration:

What did you do? Please include the actual source code causing the issue.

What did you expect to happen?

What actually happened? Please include the actual, raw output from ESLint.

[Kocal]

Why should it be supported?

[be-next-hotdog]

Okey, @Kocal I'll give you a specific example : while I tried to integrate the quill editor the way SSR :

https://github.com/surmon-china/vue-quill-editor

  <div class="quill-editor" 
       v-model="content"
       v-quill:myQuillEditor="editorOption">
  </div>

Linter warned me as usual and do you please suggest a better solution to figure it out ?
Thx :)

[Kocal]

Oh, I thought that v-model was specific to custom components and to some <input> tags.

Maybe you can use this?

<!-- eslint-disable-next-line vue/valid-v-model -->`
<div class="quill-editor" 
  v-model="content"
  v-quill:myQuillEditor="editorOption">
</div>

[be-next-hotdog]

Sorry, seems that doesnt work for me. Any solution else ?

[michalsnik]

v-model is just a syntactic sugar, and shouldn't be used on elements other than input or textarea.
You should instead manually control data flow, like this:

<div
  v-quill:myQuillEditor="editorOption"
  :content="content" 
  class="quill-editor"
  @change="onEditorChange($event)" />

[kaungmyatlwin]

The $event parameter on @change contains three objects.

text is where you can get your content as a plain text.
html is where you can get your content as HTML.
quill is an object that has to do with Quill API? I'm not very sure and haven't dived.

For people who don't know how to sync data, just do this.

    onEditorChange($event) {
      this.content = $event.html
    }

In that way you can get your HTML inside content.