Messagebar clear method throw error

[panzailiang]

The package I use:

  "dependencies": {
    "framework7": "^2.2.5",
    "framework7-icons": "^0.9.1",
    "framework7-vue": "^2.2.5",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

my code is:

<template>
  <f7-page>
    <f7-fab id="memo-add-fab" morph-to="#memo-input-bar">
      <f7-icon f7="add"></f7-icon>
    </f7-fab>
    <f7-navbar title="Memo">
    </f7-navbar>
    <f7-list class="no-margin">
      <f7-list-group>
        <f7-list-item group-title>memo</f7-list-item>
        <f7-list-item v-for="memo in memos" :key="memo.id">{{memo.title}}</f7-list-item>
      </f7-list-group>
    </f7-list>
    <f7-messagebar
        id="memo-input-bar"
        class="fab-morph-target"
        @send="addMemo">
      <f7-icon f7="arrow_up_fill" slot="send-link" class="fab-close"></f7-icon>
    </f7-messagebar>
  </f7-page>
</template>

<script>
export default {
  data () {
    return {
      memos: []
    }
  },
  methods: {
    addMemo: function (value, clear) {
      clear()
    }
  }
}
</script>

click the send-link, the in chrome browser's console, it throws error below:

TypeError: Cannot read property '$textareaEl' of undefined
    at clear (framework7.esm.bundle.js?8f98:18801)
    at VueComponent.addMemo (MemoList.vue?bef0:35)
    at VueComponent.invoker (vue.esm.js?efeb:2027)
    at VueComponent.Vue.$emit (vue.esm.js?efeb:2538)
    at VueComponent.onClick (framework7-vue.esm.bundle.js?f0e0:3354)
    at VueComponent.invoker (vue.esm.js?efeb:2027)
    at VueComponent.Vue.$emit (vue.esm.js?efeb:2538)
    at VueComponent.onClick (framework7-vue.esm.bundle.js?f0e0:1999)
    at invoker (vue.esm.js?efeb:2027)
    at HTMLAnchorElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1826)
logError @ vue.esm.js?efeb:1741
globalHandleError @ vue.esm.js?efeb:1732
handleError @ vue.esm.js?efeb:1721
Vue.$emit @ vue.esm.js?efeb:2540
onClick @ framework7-vue.esm.bundle.js?f0e0:3354
invoker @ vue.esm.js?efeb:2027
Vue.$emit @ vue.esm.js?efeb:2538
onClick @ framework7-vue.esm.bundle.js?f0e0:1999
invoker @ vue.esm.js?efeb:2027
fn._withTask.fn._withTask @ vue.esm.js?efeb:1826
sendClick @ framework7.esm.bundle.js?8f98:1692
handleTouchEnd @ framework7.esm.bundle.js?8f98:1881
handlers.forEach @ framework7.esm.bundle.js?8f98:684
localEvents.forEach @ framework7.esm.bundle.js?8f98:683
emit @ framework7.esm.bundle.js?8f98:677
emitAppTouchEvent @ framework7.esm.bundle.js?8f98:1957
appTouchEndActive @ framework7.esm.bundle.js?8f98:1972

some of your codes are here.

    onClick(event) {
      const self = this;
      const value = self.$refs.area.$el.value;
      const clear = self.f7Messagebar ? self.f7Messagebar.clear : () => {};
      this.$emit('submit', value, clear);
      this.$emit('send', value, clear);
      this.$emit('click', event);
    },

  clear() {
    const messagebar = this;
    messagebar.$textareaEl.val('').trigger('change');  //this line throw error
    return messagebar;
  }

[nolimits4web]

Will be fixed in 3.x branch already, as a workaround you can call directly Messagebar's clear method:

<f7-messagebar
  ref="messagebar"
  ...
  @send="addMemo"
>

...
addMemo: function (value, clear) {
  this.refs.messagebar.f7Messagebar.clear();
}
...