[V5][Vue] Text editor events aren't firing

Questions
1

I’m using f7 + vue (v5.0.4) on an existing project that was upgraded from v4.
I straight up copied the example codes from https://framework7.io/vue/text-editor.html but none of the events (@texteditor:input/change/focus/etc) are triggering.
The texteditor itself is working.
Here’s the code that I’m trying to get it to work:

template

<f7-list>
<f7-list-input
   floating-label
   resizable
   type="texteditor"
   input-id="custom-page-content"
   label="Page content"
   :value="page.content"
   :textEditorParams="textEditorParams"
   @texteditor:input="onPageContentInput"
></f7-list-input>
</f7-list>

method onPageContentInput

onPageContentInput(e) {
   this.page.content = e;
}

computed textEditorParams

textEditorParams() {
   return {
      mode: 'keyboard-toolbar',
      buttons: [
         ['bold', 'italic', 'underline', 'strikeThrough'],
         ['orderedList', 'unorderedList'],
         ['link', 'image'],
         ['paragraph', 'h1', 'h2', 'h3'],
      ]
   }
}

Any ideas why this might be happening?

2

What is not working? Have you tried to do console.log, etc?

3

@nolimits4web @texteditor:input is not triggering my method (onPageContentInput). I’ve tried console.log in onPageContentInput, nothing pops up. I’ve even tried @texteditor:change="(value) => page.content = value" and @texteditor:input="(value) => page.content = value".
page.content is never updated because the event never fires.

LE: I should also mention that using f7TextEditor.getValue() works, I’m getting the updated value, however this doesn’t help me that much, I need to be able to use the @texteditor:input event.

4

Ok, 2 things:

  1. f7-list-input has only texteditor:change event, nothing else
  2. Indeed, i see issue which is already fixed and will be in upcoming update
1 Like