Как сделать «виртуальный» метод получения класса реактивным в VueJS

Question

У меня есть объект BlogPost и объект Comment, которые выглядят примерно так:

class Comment {
  constructor (blogId, text) {
    this.blogId = id
    this.text = text
  }
}

class BlogPost {
  constructor (id, text) {
    this.id = id
    this.text = text
  }
  get comments () {
    return commentCollection.filter(comment => comment.blogId === this.id)
  }
}

Я хочу, чтобы геттер comments выглядел как реактивное свойство.С учетом такого значения ...

<template>
  <div>
    <h1>The post has {{myBlogPost.comments.length}} comments</h1>
    <v-btn @click="addComment()">Add Comment</v-btn>
  </div>
</template>

<script>

export default {
  data () {
    return {
      myBlogPost: null
    }
  },
  methods: {
    let newComment = new Comment('myBlogId_0', 'This is a comment on hello world')
    commentCollection.splice(0, 0, newComment)
  },
  mounted () {
    this.myBlogPost = new BlogPost('myBlogId_0', 'Hello World')
  }
}
</script>

... Я хотел бы обновить счетчик комментариев, когда пользователь добавляет комментарий.Как это сделать?Я не могу сделать BlogPost коллекцию комментариев реактивной, потому что на самом деле это не свойство.

Я пытался добавить метод computed в vue, который вызывает "getter" на BlogPost, но этопохоже, не устанавливает зависимость с коллекцией комментариев.И Vue.set(), похоже, не предлагает помощь.Где я мог бы «установить» что-то, чтобы заставить vue реагировать?

Единственная идея, которая у меня есть (которая, я думаю, будет работать), состоит в том, чтобы настроить наблюдателя на коллекции комментариев и заставить этот наблюдатель обновить какое-то другое значение в данныхпозвонив по номеру comments, но у меня могут быть десятки таких ситуаций внутри одних и тех же объектов и других.Я хотел бы избежать написания такого количества наблюдателей и сохранения большого количества дополнительного состояния в данных.Есть идеи?Спасибо /

Answer 1

Это может немного помочь:

<template>
  <div>
    <h1>The post has {{myBlogPost.comments.length}} comments</h1>
    <v-btn @click="addComment">Add Comment</v-btn>
  </div>
</template>

<script>

export default {
  data () {
    return {
      myBlogPost: {
        comments: []
      }
    }
  },
  methods: {
    addComment() {
      let newComment = new Comment('myBlogId_0', 'This is a comment on hello world')
      // commentCollection is not defined in this snippet
      commentCollection.splice(0, 0, newComment)
      this.myBlogPost.comments.push( newComment )
    }
    // let newComment = new Comment('myBlogId_0', 'This is a comment on hello world')
    // commentCollection.splice(0, 0, newComment)
  },
  mounted () {
    this.myBlogPost = new BlogPost('myBlogId_0', 'Hello World')
  }
}
</script>