Vueのdataプロパティに値を格納するとインスタンスのクラスが取れる

vueのdataプロパティに値を格納しようとしたら、元のインスタンスのクラスが保持されずに困っています。
具体的にはこのような挙動になります。

top.vue

<template>
  <h2>{{ all_events.constructor.name }}</h2>
</template>

<script type="text/javascript">
import EventsCollection from 'models/events_collection'

export default {
  data: function () {
    return {
      all_events: null,
    }
  },
  created(){
    console.log("EventsCollectionのコンストラクタは定義されている。");
    console.log(EventsCollection);

    console.log("EventsCollectionのインスタンスも作れる。");
    var aaa = new EventsCollection()
    console.log( aaa.constructor.name );

    console.log("ただ、vueオブジェクトに格納するとなぜか継承元のArrayになってしまう。");
    this.all_events = new EventsCollection()
    console.log( this.all_events.constructor.name );
  }
}
</script>

models/events_collection.js

export default class EventsCollection extends Array {
  constructor(arg) {
    super()
  }

出力結果

この状態ではall_eventsからEventCollectionに定義したメソッドを呼び出せないので、呼び出せるようにしたいです。
環境はrailsのwebpackerです。

よろしくお願いします…

行動規範の内容に同意します

回答1件

webpackがビルドした時にだいぶコードが変化するみたいですね…

Object.createを使った継承方法など試しに使ってみたらどうですかね…？

models/events_collection.jsの中身の例

js
1function EventsCollection () {
2}
3EventsCollection.prototype = Object.create(Array.prototype)
4EventsCollection.prototype.constructor = EventsCollection
5EventsCollection.prototype.addMethod = function () {
6  return 'addMethod'
7}
8export default EventsCollection