1

やりたいこと

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

1 青丸のボタンをクリックすると↓
画像の説明をここに入力

2 両方の数が増えてしまう。
画像の説明をここに入力

このアプリのURL

コード

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"

1 件の回答 1

2

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

<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>
2
  • 素早い対応ありがとうございます!(3日悩んでいた問題を秒で・・・)。ほんとに助かりました!!! Commented 2019年10月30日 14:55
  • お役に立ててよかったです。回答を承認いただければ嬉しいです :)
    – fumiya.f
    Commented 2019年10月30日 15:03

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。