やりたいこと
vuetify+vue-cliでtodoアプリ(講義さぼり回数カウントアプリ)を作っています。
現在、ボタンをクリックするとそのボタンごとではなく、すべてのボタンの数がカウントされている状況です。なのでボタンごとにカウントするようにしたいです。
コード
App.vue
<template>
<v-app>
<div>
<v-app-bar app>
<v-toolbar-title class="headline text-uppercase">
<span class="font-weight-light">授業さぼりカウントアプリ</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn href="#">
<span class="mr-2">ゲームしたい・・・</span>
</v-btn>
</v-app-bar>
</div>
<v-content>
<v-container>
<v-row>
<v-col cols="6">
<v-text-field v-model="name" :counter="10" label="授業名" @keyup.enter="addTodo" required></v-text-field>
</v-col>
</v-row>
<div v-for="todo in todos" :key="todo.name">
<v-card max-width="344" class="mx-auto">
<v-card-title>{{todo.name}}</v-card-title>
<v-card-text>
<v-text-field label="メモ"></v-text-field>
</v-card-text>
<v-card-actions>
<v-btn @click="increment" color="primary">さぼり回数: {{ count }}</v-btn>
<v-btn @click="decrement" color="error">間違え</v-btn>
</v-card-actions>
</v-card>
</div>
</v-container>
</v-content>
</v-app>
</template>
<script>
export default {
name: "App",
data: function() {
return {
count: 0,
name: "",
todos: []
};
},
methods: {
addTodo() {
this.todos.push({
name: this.name
});
this.name = "";
},
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
};
</script>
一応、githubに全コード上げときます。↓
https://github.com/masal9pse/courageTodo/tree/develop
環境
windows10(64)
"vue": "^2.6.10",
"vuetify": "^2.1.0",
"vue-cli":"3.11.0",
"node":"v11.13.0"