60140


# やりたいこと

vuetify＋vue-cliでtodoアプリ(講義さぼり回数カウントアプリ）を作っています。  
現在、ボタンをクリックするとそのボタンごとではなく、すべてのボタンの数がカウントされている状況です。なのでボタンごとにカウントするようにしたいです。

１ 青丸のボタンをクリックすると↓  
[![画像の説明をここに入力](https://i.stack.imgur.com/kkMFe.jpg)](https://i.stack.imgur.com/kkMFe.jpg)

２ 両方の数が増えてしまう。  
[![画像の説明をここに入力](https://i.stack.imgur.com/nF8ED.jpg)](https://i.stack.imgur.com/nF8ED.jpg)

[このアプリのURL](http://vuejs-http-e3587.firebaseapp.com)

# コード

App.vue

[code]

    <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>
    
[/code]

一応、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"


CC BY-SA 4.0
2019-10-30T14:13:28.167
60138
2019-10-30T14:47:46.607
2020-06-17T08:14:45.997
-1
36424
question
vue.js
クリックすると全部のボタンの数が増えてしまうのではなく、各ボタンごとにカウントできるようにしたい。


`App.vue` を以下のようにすると良いと思います。ポイントは、`todos`にpushするときにcountをちゃんと渡し、ボタン上の表示を
`todo.count` にすることと、あと `increment`と`descrement`のときに`todo`の参照を渡すことですね。

[code]

    <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" label="授業名" @keyup.enter="addTodo" required></v-text-field>
              </v-col>
            </v-row>
            <div v-for="todo in todos" :key="todo.name">
              <v-card card_id="" 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(todo)" color="primary">さぼり回数: {{ todo.count }}</v-btn>
    
                  <v-btn @click="decrement(todo)" 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,
            count: 0
          });
          this.name = "";
        },
        //全部に反映されている。
        increment(todo) {
          todo.count++;
        },
        decrement(todo) {
          todo.count--;
        }
      }
    };
    </script>
    
[/code]


CC BY-SA 4.0
2019-10-30T14:47:46.607
60140
2019-10-30T14:47:46.607
17181
60138
answer