【Vue】クラスを作りたい

もしかしたら、そもそもjsでは出来ないのかもしれませんが、
VueでMVCのような事をしたいと考えています。

例

例えば、TODOリストを作るときは下記のような実装をします。

js
1export default {
2  data () {
3    return {
4        todos: {}
5    }
6  },
7  methods: {
8    addTodo(){
9        let todo = {
10          title: 'タイトル',
11          body: '本文'
12        }
13        this.todos.push(todo)
14    }
15  }
16}

TODOを管理するthis.todosに都度、個々の配列をpushする方法を取ります。

実際にやりたい事

個々のtodoに関数を持たせたり、初期値設定をするための関数（phpで言うconstruct）を設定したいです。
そのため、todoのクラスを作ってインスタンスをpushしたいです。

上記の例で言うと、todoクラス（モデル）を作りたいです。

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

回答1件

ベストアンサー

外部jsファイルにTodoクラスを作成するのはいかがでしょう？
簡単ですがサンプル作ってみました。

TodoList.vue

vue
1<template>
2  <div>
3    TODO List
4    {{todos}}
5    <button @click="addTodo">Add </button>
6  </div>
7</template>
8
9<script>
10import Todo from './Todo.js'
11
12export default {
13  data() {
14    return {
15      todos: []
16    }
17  },
18  methods: {
19    addTodo() {
20      let new_todo = new Todo('てすと', 'this is test body')
21      this.todos.push(new_todo.getTodo())
22    }
23  }
24}
25</script>

Todo.js

Javascript
1export default class Todo {
2    constructor(title, body) {
3        this.title = title
4        this.body = body
5    }
6
7    getTodo() {
8        return this
9    }
10}
11
12
13