【初心者です】Vue.js 複数の入力フォームの数値を合計表示したい
Q&A
Closed
解決したいこと
Vue.jsで点数計算するアプリを制作中です。
ボタンを押すと、入力フォーム内の数値が増減する機能を実装出来ました。
現在は、複数の入力フォームに入力された数値を合計表示する機能を実装中です。
（打数の合計を計算して、総打数の欄に表示させたい）
しかし、いろいろと試してみたのですが、まったく実装することが出来ません。
どのようにすれば、数値の合計機能を実装出来るか、教えていただきたいです。
※ソースコードにはCSSが適用されていないので表示が崩れています。
該当するソースコード
<!-- HTML -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- Vue.js(開発用) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<table class="table table-bordered">
<!-- 見出し行 -->
<thead>
<tr>
<th class="col-sm"></th>
<th class="col-lg bg-light">ゲート①</th>
<th class="col-lg">ゲート②</th>
<th class="col-lg bg-light">ゲート③</th>
<th class="col-lg">ゲート④</th>
<th class="col-lg bg-light">ゴール</th>
<th class="col-md">総打数</th>
<th class="col-md bg-light">加算点</th>
<th class="col-md">Total</th>
</tr>
</thead>
<!-- １行目 -->
<tbody class="counter">
<tr>
<th>A</th>
<th class="bg-light">
<counter></counter>
</th>
<th>
<counter></counter>
</th>
<th class="bg-light">
<counter></counter>
</th>
<th>
<counter></counter>
</th>
<th class="bg-light">
<counter></counter>
</th>
<th>
<div class="sum"></div>
</th>
<th class="bg-light">
<div class="addition"></div>
</th>
<th>
<div class="total"></div>
</th>
</tr>
</tbody>
</table>
<!-- Test.js -->
<script src="test.js"></script>
</body>
</html>
// JavaScript
const counter = {
data() {
return {
count: 0,
};
},
methods: {
countUp() {
if ( this.count < 0 ) {
this.count = 0;
} else {
this.count += 1;
}
},
countDown() {
if ( this.count <= 0 ) {
this.count = 0;
} else {
this.count -= 1;
}
},
},
template: `
<form class="ml-2 mr-2">
打数
<div class="form-group input-group">
<div class="input-group-prepend">
<button type="button" @click="countUp" class="btn btn-primary">+</button>
</div>
<input type="number" v-model="count" min="0" disabled class="form-control">
<div class="input-group-append">
<button type="button" @click="countDown" class="btn btn-secondary">-</button>
</div>
</div>
</form>
`,
};
new Vue({
el: '.counter',
components: {
'counter': counter,
},
});
自分で試したこと
コンポーネント内のinput要素にv-model="count"としているので、countという名前でフォームに入力された数値のデータを取得出来ると思ったですが、出来ませんでした。
Vue.jsの公式リファレンスでは、コンポーネント内でv-modelを使用するときは、propsや:valueや@inputを使用するとあったので、そのとおりにやってみたけどダメでした。
0
