Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't I use v-model?

See original GitHub issue

Summary

I installed ‘@toast-ui/vue-editor’ to use the editor in vue. The component was imported and registered. I am trying to use it like this in templete

<editor
      :options="editorOptions"
      v-model="createParams.content"
      height="300px"
     initialEditType="wysiwyg"   />

but data binding doesn’t work.

https://github.com/nhn/tui.editor/issues/1023

Is the v-model still not working?

Version

“@toast-ui/vue-editor”: “^2.2.0”

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:5

Top GitHub Comments

4reactions

derek-knoxcommented, Jul 1, 2020

@mygyugyu This is one way in case you missed it https://github.com/nhn/tui.editor/issues/1023#issuecomment-643024296.

Basically Toast UI manages a more complicated internal state (hence the comment about perf concerns). For now our solution is:

Set an :initial-value (you need this instead of v-model until implemented)
- https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue#L123
Expose an API to update this value
- https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue#L81
Update the value using the Toast UI ref API invoke('setMarkdown', newVal);
- https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/vue_shared/components/rich_content_editor/rich_content_editor.vue#L82

1reaction

justirva09commented, Jul 8, 2021

Here’s My Sandbox link for onChange and get value for HTML and MARKDOWN tui/editor with VueJs.

https://codesandbox.io/s/onchange-tuieditor-v4ngb

Top Results From Across the Web

What you should know about Vue v-model - LearnVue

Vue v-model is a directive that creates a two-way data binding between a value in our template and a value in our data...

Form Input Bindings - Vue.js

In addition, v-model can be used on inputs of different types, <textarea> , and <select> elements. It automatically expands to different DOM property...

Vue during coffee break - using v-model with custom ...

v -model is a common directive used in almost every Vue application. It's typically used to enable two-way data binding on form elements...

Using v-model in Vue 3 to build complex forms - LogRocket Blog

The Vue v-model directive enables two-way data binding on form input elements, such as the input element, textarea element, and select element ...

Vue, how to use v-model - Flavio Copes

The v-model Vue directive allows us to create a two-way binding. You can bind a form input element for example, and make it...