複数ボタンのどれが押されたのかを特定してFirebaseにデータを保存したい

Question

前提・実現したいこと

Vue.jsとFirebaseを使って、表計算をするアプリを制作中です。
「＋」と「ー」のボタンでカウンターの数値が増減し、その合計などを計算します。
またFirebaseで、ログイン機能を実装しています。

このアプリに、各カウンターの数値を保存する機能を実装したいです。
ただし現状は、複数ボタンのどこのボタンが押されたのかを特定できず、どのボタンを押しても同じキーにデータが保存されてしまいます。

発生している問題・エラーメッセージ

複数の<button>要素をVue.jsのコンポーネントでテンプレ化して、HTMLに表示させています。

下記のコードではどこのボタンを押しても、Firebaseのhitというキーの数値が増減してしまいます。

該当のソースコード

<table class="table table-bordered table-striped mt-3">
	<thead class="thead-light">
		<tr>
			<th class="col-sm gameCount"><span>第 </span>{{ gameCount }}<span> 試合</span></th>
			<th class="col-lg">ゲート１</th>
			<th class="col-lg">ゲート２</th>
			<th class="col-lg">ゲート３</th>
			<th class="col-lg">ゲート４</th>
			<th class="col-lg">ゴール</th>
			<th class="col-md">総打数</th>
			<th class="col-md">加算点</th>
			<th class="col-md">Total</th>
		</tr>
	</thead>
	<tbody>
		<tr
			v-for="(row, index) in rows"
			:key="index"
		>
			<th class="col-sm">{{ row.number }}<br>{{ row.name }}<br>さん</th>
			<td>
				<counter-hit v-model="row.scores.gate1.count"></counter-hit>
				<hoop-in v-model="row.scores.gate1.in"></hoop-in>
			</td>
			<td>
				<counter-hit v-model="row.scores.gate2.count"></counter-hit>
				<hoop-in v-model="row.scores.gate2.in"></hoop-in>
			</td>
			<td>
				<counter-hit v-model="row.scores.gate3.count"></counter-hit>
				<hoop-in v-model="row.scores.gate3.in"></hoop-in>
			</td>
			<td>
				<counter-hit v-model="row.scores.gate4.count"></counter-hit>
				<hoop-in v-model="row.scores.gate4.in"></hoop-in>
			</td>
			<td>
				<counter-hit v-model="row.scores.goal.count"></counter-hit>
				<hoop-in v-model="row.scores.goal.in">ネットイン</hoop-in>
			</td>
			<td>
				<div class="sum">{{ sum(index) }}</div>
			</td>
			<td>
				<div class="addition">{{ addition(index) }}</div>
			</td>
			<td>
				<div class="total">{{ sum(index) + addition(index) }}</div>
			</td>
		</tr>
	</tbody>
</table>

const counterHit = {
	props: ['value'],
	methods: {
		countUp() {
			this.$emit('input', this.value + 1);
			firebase
				.database()
				.ref('hit')
				.set(this.value + 1);
		},
		countDown() {
			if ( this.value > 0 ) {
				this.$emit('input', this.value - 1);
				firebase
					.database()
					.ref('hit')
					.set(this.value - 1);
			}
		},
	},
	template: `
		<form>
			打数
			<div class="form-group input-group">
				<div class="input-group-prepend">
					<button
						type="button"
						@click="countUp"
						class="btn btn-primary btn-up"
					>+</button>
				</div>
				<input
					type="number"
					:value="value"
					min="0"
					disabled
					class="form-control"
				>
				<div class="input-group-append">
					<button
						type="button"
						@click="countDown"
						class="btn btn-secondary btn-down"
					>-</button>
				</div>
			</div>
		</form>
	`,
};

試したこと

<button>の@clickに、Firebaseへのデータ保存のコードを書きました。
ただしref('hit')としているので、どのボタンを押してもhitというキーにデータが保存されます。
自分でも、「そうなるよなあ」と思います。

押されたボタンがどこかを特定して、それを元に各ボタンごとにキーを割り当てなければダメだと思います。
しかし、その方法が分からず悩んでいます。

Answer 1

propsで名前を与える方法ではダメなのでしょうか

<counter-hit v-model="row.scores.gate1.count" database="gate1"></counter-hit>
<counter-hit v-model="row.scores.gate2.count" database="gate2"></counter-hit>

props: {
  ...
  database: {
    type: String,
    required: true
  }
},
methods: {
  countUp () {
    ...
    firebase
      .database()
      .ref(this.database)
      .set(this.value + 1);    
  }
}

Comments

[chan-kama]

回答ありがとうございます。
なるほど！
初心者なので時間かかると思いますが、この方法でやってみます。
本当に実装出来たら、またコメントします。

[chan-kama]

neko_daisukiさん、早速上記の方法でやってみました。
確かにこれでgate1〜goalを特定して、Firebaseにデータを保存することが出来ました。
ただしv-forでループしているので、今度はどの行のgate1〜goalのボタンなのかを判定する必要がありますよね。
propsのdatabaseにv-forのindexとか、{{ row.number }}とかを渡せれば解決しそうなんですが・・・。
むむむ・・・、いろいろ試してみます。

[chan-kama]

:database="row.number + '-' + 'gate1-count'"とすることで、行も特定することが出来ました。
これで意図通りにFirebaseにデータを保存することが出来ました。
ありがとうございました。