Vue.jsのmethods(メソッド)でExcelのような表計算機能を実装

点数計算アプリの画像プログラミング備忘録

どうも、ちゃんカマでございます。

もしかしてVue.jsで、Excelのような表計算機能を実装する方法についてお調べですか?
それならVue.jsのmethods(メソッド)を使うと実装出来ますよ。

私は点数計算を行うWebアプリを制作する過程で、Vue.jsのmethods(メソッド)を使用しました。
その結果、Excelのような表計算機能を実装することが出来ました。

そこで今回はVue.jsのmethods(メソッド)を使って、Excelのような表計算機能を実装する方法について解説します。

ちなみに私が作ったアプリはこんな感じです。( ↓ GIF動画参照)

点数計算アプリの動作の様子
点数計算アプリの動作の様子

+やーのボタンを押すと「打数」がカウントされ、その合計点などが計算されて「総打数」や「加算点」、「Total」の欄に表示されます。
Excelの表計算のような機能ですね。

この記事ではこんな疑問や悩みにお答えします
  • Vue.jsを使って、Excelのような表計算機能を実装したい
  • Vue.jsのmethods(メソッド)の使用方法を知りたい

この記事の内容
  • Vue.jsでExcelのような表計算機能を実装する方法
  • Vue.jsのmethods(メソッド)の使用方法について
  • そのままコピペで使える完成コードも記載しています
スポンサーリンク

表計算機能を実装する前のコード

表計算機能を実装する前のコードを、下記に記載します。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>

	<!-- Normalize CSS -->
	<link rel="stylesheet" href="normalize.css">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

	<!-- Style CSS -->
	<link rel="stylesheet" href="style.css">

	<!-- Vue.js(本番用) -->
	<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> -->

	<!-- Vue.js(開発用) -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<table class="table table-bordered table-striped">
		<thead class="thead-light">
			<tr>
				<th class="col-sm"></th>
				<th class="col-lg">ゲート1</th>
				<th class="col-lg">ゲート2</th>
				<th class="col-lg">ゲート3</th>
				<th class="col-lg">ゲート4</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 class="row-item">
			<tr
				v-for="(row, index) in rows"
				:key="index"				
			>
				<th class="col-sm">{{ row.name }}</th>
				<td>
					<counter-hit v-model="row.countGate1"></counter-hit>
					<hoop-in v-model="row.inGate1"></hoop-in>
				</td>
				<td>
					<counter-hit v-model="row.countGate2"></counter-hit>
					<hoop-in v-model="row.inGate2"></hoop-in>
				</td>
				<td>
					<counter-hit v-model="row.countGate3"></counter-hit>
					<hoop-in v-model="row.inGate3"></hoop-in>
				</td>
				<td>
					<counter-hit v-model="row.countGate4"></counter-hit>
					<hoop-in v-model="row.inGate4"></hoop-in>
				</td>
				<td>
					<counter-hit v-model="row.countGoal"></counter-hit>
					<hoop-in v-model="row.inGoal">ネットイン</hoop-in>
				</td>
				<td>総打数</td>
				<td>加算点</td>
				<td>Total</td>
			</tr>
		</tbody>
	</table>

	<!-- Bootstrap JavaScript -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

	<!-- Main.js -->
	<script src="main.js"></script>
</body>
</html>
main.js
const counterHit = {
	props: ['value'],
	methods: {
		countUp() {
			this.$emit('input', this.value + 1);
		},
		countDown() {
			if ( this.value > 0 ) {
				this.$emit('input', 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" v-model="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>
	`,
};

const hoopIn = {
	props: ['value'],
	methods: {
		add() {
			this.$emit('input', "○");	
		},
		remove() {
			this.$emit('input', "");
		},
	},
	template: `
		<form>
			<slot>フープイン</slot>
			<div class="form-group input-group">
				<div class="input-group-prepend">
					<button type="button" @click="add" class="btn btn-info btn-add">○</button>
				</div>
				<input type="text" v-model="value" disabled class="form-control">
				<div class="input-group-append">
					<button type="button" @click="remove" class="btn btn-secondary btn-remove">☓</button>
				</div>
			</div>
		</form>
	`,
};

new Vue({
	el: '.row-item',
	data() {
		return {
			rows: [
				{
					name: 'Aさん',
					countGate1: 0,
					countGate2: 0,
					countGate3: 0,
					countGate4: 0,
					countGoal: 0,
					inGate1: "",
					inGate2: "",
					inGate3: "",
					inGate4: "",
					inGoal: "",
				},
				{
					name: 'Bさん',
					countGate1: 0,
					countGate2: 0,
					countGate3: 0,
					countGate4: 0,
					countGoal: 0,
					inGate1: "",
					inGate2: "",
					inGate3: "",
					inGate4: "",
					inGoal: "",
				},
				{
					name: 'Cさん',
					countGate1: 0,
					countGate2: 0,
					countGate3: 0,
					countGate4: 0,
					countGoal: 0,
					inGate1: "",
					inGate2: "",
					inGate3: "",
					inGate4: "",
					inGoal: "",
				},
				{
					name: 'Dさん',
					countGate1: 0,
					countGate2: 0,
					countGate3: 0,
					countGate4: 0,
					countGoal: 0,
					inGate1: "",
					inGate2: "",
					inGate3: "",
					inGate4: "",
					inGoal: "",
				},
				{
					name: 'Eさん',
					countGate1: 0,
					countGate2: 0,
					countGate3: 0,
					countGate4: 0,
					countGoal: 0,
					inGate1: "",
					inGate2: "",
					inGate3: "",
					inGate4: "",
					inGoal: "",
				},
				{
					name: 'Fさん',
					countGate1: 0,
					countGate2: 0,
					countGate3: 0,
					countGate4: 0,
					countGoal: 0,
					inGate1: "",
					inGate2: "",
					inGate3: "",
					inGate4: "",
					inGoal: "",
				},
			],
		};
	},
	components: {
		'counter-hit': counterHit,
		'hoop-in': hoopIn,
	},
});
style.css
@charset "UTF-8";

body {
	min-width: 1024px;
	font-size: 18px;
	padding: 5px;
}

.col-sm {
	width: 8%;
}

.col-lg {
	width: 14%;
}

.col-md {
	width: 8%;
}

th {
	text-align: center;
}

.form-control {
	padding: 0;
	text-align: center;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"][disabled],
input[type="text"][disabled]{
	background-color: #fff;
}

.btn-up,
.btn-down,
.btn-add,
.btn-remove {
	width: 37px;
}

上記のコードでページを表示させてみます。

アプリ外観
計算機能を実装する前のページ

+やーのボタンを押すと「打数」の数値がカウントされる、カウンター機能は実装出来ています。
ただし、「打数」のカウンターの数値を元に「総打数」などを計算する機能は実装出来ていません。

スポンサーリンク

Vue.jsのmethods(メソッド)とは

Vue.jsのmethods(メソッド)については、下記の記事が参考になるかと思います。

Vueのcomputedとmethodsの「使い分け」を解説|たのしいWeb
Vue.jsのcomputedとmethodsの使い分けについて解説しています。computedとmethodsは明確に違うものですが、Vue.jsを使い始めの頃は分かりづらいものです。参考コードを使って初学者にも分かりやすく解説しています。

methods(メソッド)とは要するに、自作の関数のようなものと考えて良いかと。
クリックなどのイベントのたびに、このmethodsを実行出来ます。

また、似たような機能にcomputedがあります。
ただし、今回はボタンが押される(クリックされる)たびに計算を実行したいので、computedではなくmethodsを使います。

Vueにmethodsオプションを指定【総打数を計算する】

Vue.jsのmethodsを使用するには、Vueインスタンスのmethodsオプションで指定します。
main.jsを下記のとおりに書きます。

main.js
<!-- 以上は省略 -->

new Vue({
	el: '.row-item',
	data() {
		
<!-- 途中は省略 -->

	},
	methods: {
		sum(index) {
			return (
				this.rows[index].countGate1 +
				this.rows[index].countGate2 +
				this.rows[index].countGate3 +
				this.rows[index].countGate4 +
				this.rows[index].countGoal
			);
		},
	},
	components: {
		'counter-hit': counterHit,
		'hoop-in': hoopIn,
	},
});

new Vueにmethodsオプションを指定します。
上記のコードでは、「打数」カウンターの合計値である「総打数」を計算しています。
総打数を計算するmethodsの名前を、「sum(index)」としています。

引数に渡している「index」は、v-forの「:key=”index”」のindexです。
v-forの使い方については、下記の記事を参考にどうぞ。

引数にindexを渡さないと、どの行のカウンターボタンが押されたのか、Vue.jsが認識出来なくなります。
indexを渡すことで、カウンターボタンが押された行の総打数が計算されるようになります。

methods: {
	sum(index) {

	},
},

sum(index)の中には、総打数の計算式を書いています。

「this.rows[index]」で、カウンターボタンが押された行のdataを取得出来ます。
例えば1行目のカウンターボタンが押されると「this.rows[0]」となり、rows配列に格納されている1行目のdata(countGate1やcountGoal)を取得出来ます。

後は取得したdataを合計して、その値をreturnしています。

methods: {
	sum(index) {
			return (
				this.rows[index].countGate1 +
				this.rows[index].countGate2 +
				this.rows[index].countGate3 +
				this.rows[index].countGate4 +
				this.rows[index].countGoal
			);
	},
},

Mustache構文を使って、methodsの計算結果をHTMLで表示

methodsのsum(index)の計算結果を、HTMLで表示させるにはMustache構文を使えばカンタンです。
index.htmlを下記のとおりに書き換えます。

index.html
<!-- 以上は省略 -->

<tbody class="row-item">
	<tr
		v-for="(row, index) in rows"
		:key="index"
	>

<!-- 途中は省略 -->

		<td>{{ sum(index) }}</td>
		<td>加算点</td>
		<td>Total</td>
	</tr>
</tbody>

<!-- 以下は省略 -->

sum(index)の計算結果を総打数の欄に表示させるために、該当する<td></td>要素内にMustache構文で書いています。
Mustache構文とは、{{ … }}と書く方法です。
{{ … }}の中にmethods名を書くことで、計算結果が表示されます。

<td>{{ sum(index) }}</td>

ちなみにMustacheとは「口ひげ」のことです。
Mustache構文の括弧が、口ひげに似ているからだそうです。

では、ページを表示してみます。

総打数を実装
総打数を実装

総打数を計算する機能を実装出来ました。

加算点を計算する

総打数と同じように、加算点を計算する機能も実装していきます。
main.jsを下記のとおりに書きます。

main.js
<!-- 以上は省略 -->

new Vue({
	el: '.row-item',
	data() {
		
<!-- 途中は省略 -->

	},
	methods: {
		sum(index) {

<!-- 途中は省略 -->

		},
		addition(index) {
			let additionGate1 = 0;
			let additionGate2 = 0;
			let additionGate3 = 0;
			let additionGate4 = 0;
			let additionGoal = 0;

			if(this.rows[index].countGate1 === 1 && this.rows[index].inGate1 === "○") {
				additionGate1 = -3;
			} else if(this.rows[index].countGate1 === 1) {
				additionGate1 = -2;
			} else if(this.rows[index].inGate1 === "○" && this.rows[index].countGate1 !== 0) {
				additionGate1 = -1;
			}
			
			if(this.rows[index].countGate2 === 1 && this.rows[index].inGate2 === "○") {
				additionGate2 = -3;
			} else if(this.rows[index].countGate2 === 1) {
				additionGate2 = -2;
			} else if(this.rows[index].inGate2 === "○" && this.rows[index].countGate2 !== 0) {
				additionGate2 = -1;
			}

			if(this.rows[index].countGate3 === 1 && this.rows[index].inGate3 === "○") {
				additionGate3 = -3;
			} else if(this.rows[index].countGate3 === 1) {
				additionGate3 = -2;
			} else if(this.rows[index].inGate3 === "○" && this.rows[index].countGate3 !== 0) {
				additionGate3 = -1;
			}

			if(this.rows[index].countGate4 === 1 && this.rows[index].inGate4 === "○") {
				additionGate4 = -3;
			} else if(this.rows[index].countGate4 === 1) {
				additionGate4 = -2;
			} else if(this.rows[index].inGate4 === "○" && this.rows[index].countGate4 !== 0) {
				additionGate4 = -1;
			}

			if(this.rows[index].countGoal === 1 && this.rows[index].inGoal === "○") {
				additionGoal = -4;
			} else if(this.rows[index].countGoal === 1) {
				additionGoal = -2;
			} else if(this.rows[index].inGoal === "○" && this.rows[index].countGoal !== 0) {
				additionGoal = -2;
			}

			return (
				additionGate1 + 
				additionGate2 +
				additionGate3 + 
				additionGate4 +
				additionGoal
			);
		},
	},
	components: {
		'counter-hit': counterHit,
		'hoop-in': hoopIn,
	},
});

加算点を計算するmethods名は「addition(index)」としました。
その中身はまず、let … で加算点の値を格納する変数を作成しています。

let additionGate1 = 0;
let additionGate2 = 0;
let additionGate3 = 0;
let additionGate4 = 0;
let additionGoal = 0;

次に、加算点を得られる条件式を書いています。
ちょっと複雑に見えるかもしれませんが、「フープインが◯なら−1、打数が1なら−2、フープインが◯で打数も1なら−3」といった内容の条件式になります。

if(this.rows[index].countGate1 === 1 && this.rows[index].inGate1 === "○") {
	additionGate1 = -3;
} else if(this.rows[index].countGate1 === 1) {
	additionGate1 = -2;
} else if(this.rows[index].inGate1 === "○" && this.rows[index].countGate1 !== 0) {
	additionGate1 = -1;
}

後は各加算点の合計を計算して、その値をreturnしています。

return (
	additionGate1 + 
	additionGate2 +
	additionGate3 + 
	additionGate4 +
	additionGoal
);

addition(index)の計算結果をHTMLに表示させます。
index.htmlを下記のとおりに書き換えます。

index.html
<!-- 以上は省略 -->

<tbody class="row-item">
	<tr
		v-for="(row, index) in rows"
		:key="index"
	>

<!-- 途中は省略 -->

		<td>{{ sum(index) }}</td>
		<td>{{ addition(index) }}</td>
		<td>Total</td>
	</tr>
</tbody>

<!-- 以下は省略 -->

<td></td>要素内にMustache構文で書いています。

<td>{{ addition(index) }}</td>

Totalを計算する

Totalの値は、総打数と加算点の合計値になります。
Mustache構文を書くだけで、Totalの値を計算して表示させることが出来ます。
index.htmlを下記のとおりに書き換えます。

index.html
<!-- 以上は省略 -->

<tbody class="row-item">
	<tr
		v-for="(row, index) in rows"
		:key="index"
	>

<!-- 途中は省略 -->

		<td>{{ sum(index) }}</td>
		<td>{{ addition(index) }}</td>
		<td>{{ sum(index) + addition(index) }}</td>
	</tr>
</tbody>

<!-- 以下は省略 -->

Totalの欄に該当する<td></td>要素内に、Mustache構文で書いています。

<td>{{ sum(index) + addition(index) }}</td>

このようにMustache構文内で、methodsの値の合計を計算することも出来るんですね。
Vue.jsは便利!

では、ページを表示してみます。

点数計算機能を実装出来た
点数計算機能を実装出来た

加算点やTotalの値も計算されて、きちんと表示も出来ていますね。
これで表計算機能の実装は完了です。

完成コードを記載

Excelのような表計算機能を実装出来たコードを、下記に記載します。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>

	<!-- Normalize CSS -->
	<link rel="stylesheet" href="normalize.css">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

	<!-- Style CSS -->
	<link rel="stylesheet" href="style.css">

	<!-- Vue.js(本番用) -->
	<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> -->

	<!-- Vue.js(開発用) -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<table class="table table-bordered table-striped">
		<thead class="thead-light">
			<tr>
				<th class="col-sm"></th>
				<th class="col-lg">ゲート1</th>
				<th class="col-lg">ゲート2</th>
				<th class="col-lg">ゲート3</th>
				<th class="col-lg">ゲート4</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 class="row-item">
			<tr
				v-for="(row, index) in rows"
				:key="index"
			>
				<th class="col-sm">{{ row.name }}</th>
				<td>
					<counter-hit v-model="row.countGate1"></counter-hit>
					<hoop-in v-model="row.inGate1"></hoop-in>
				</td>
				<td>
					<counter-hit v-model="row.countGate2"></counter-hit>
					<hoop-in v-model="row.inGate2"></hoop-in>
				</td>
				<td>
					<counter-hit v-model="row.countGate3"></counter-hit>
					<hoop-in v-model="row.inGate3"></hoop-in>
				</td>
				<td>
					<counter-hit v-model="row.countGate4"></counter-hit>
					<hoop-in v-model="row.inGate4"></hoop-in>
				</td>
				<td>
					<counter-hit v-model="row.countGoal"></counter-hit>
					<hoop-in v-model="row.inGoal">ネットイン</hoop-in>
				</td>
				<td>{{ sum(index) }}</td>
				<td>{{ addition(index) }}</td>
				<td>{{ sum(index) + addition(index) }}</td>
			</tr>
		</tbody>
	</table>

	<!-- Bootstrap JavaScript -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

	<!-- Main.js -->
	<script src="main.js"></script>
</body>
</html>
main.js
const counterHit = {
	props: ['value'],
	methods: {
		countUp() {
			this.$emit('input', this.value + 1);
		},
		countDown() {
			if ( this.value > 0 ) {
				this.$emit('input', 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" v-model="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>
	`,
};

const hoopIn = {
	props: ['value'],
	methods: {
		add() {
			this.$emit('input', "○");	
		},
		remove() {
			this.$emit('input', "");
		},
	},
	template: `
		<form>
			<slot>フープイン</slot>
			<div class="form-group input-group">
				<div class="input-group-prepend">
					<button type="button" @click="add" class="btn btn-info btn-add">○</button>
				</div>
				<input type="text" v-model="value" disabled class="form-control">
				<div class="input-group-append">
					<button type="button" @click="remove" class="btn btn-secondary btn-remove">☓</button>
				</div>
			</div>
		</form>
	`,
};

new Vue({
	el: '.row-item',
	data() {
		return {
			rows: [
				{
					name: 'Aさん',
					countGate1: 0,
					countGate2: 0,
					countGate3: 0,
					countGate4: 0,
					countGoal: 0,
					inGate1: "",
					inGate2: "",
					inGate3: "",
					inGate4: "",
					inGoal: "",
				},
				{
					name: 'Bさん',
					countGate1: 0,
					countGate2: 0,
					countGate3: 0,
					countGate4: 0,
					countGoal: 0,
					inGate1: "",
					inGate2: "",
					inGate3: "",
					inGate4: "",
					inGoal: "",
				},
				{
					name: 'Cさん',
					countGate1: 0,
					countGate2: 0,
					countGate3: 0,
					countGate4: 0,
					countGoal: 0,
					inGate1: "",
					inGate2: "",
					inGate3: "",
					inGate4: "",
					inGoal: "",
				},
				{
					name: 'Dさん',
					countGate1: 0,
					countGate2: 0,
					countGate3: 0,
					countGate4: 0,
					countGoal: 0,
					inGate1: "",
					inGate2: "",
					inGate3: "",
					inGate4: "",
					inGoal: "",
				},
				{
					name: 'Eさん',
					countGate1: 0,
					countGate2: 0,
					countGate3: 0,
					countGate4: 0,
					countGoal: 0,
					inGate1: "",
					inGate2: "",
					inGate3: "",
					inGate4: "",
					inGoal: "",
				},
				{
					name: 'Fさん',
					countGate1: 0,
					countGate2: 0,
					countGate3: 0,
					countGate4: 0,
					countGoal: 0,
					inGate1: "",
					inGate2: "",
					inGate3: "",
					inGate4: "",
					inGoal: "",
				},
			],
		};
	},
	methods: {
		sum(index) {
			return (
				this.rows[index].countGate1 +
				this.rows[index].countGate2 +
				this.rows[index].countGate3 +
				this.rows[index].countGate4 +
				this.rows[index].countGoal
			);
		},
		addition(index) {
			let additionGate1 = 0;
			let additionGate2 = 0;
			let additionGate3 = 0;
			let additionGate4 = 0;
			let additionGoal = 0;

			if(this.rows[index].countGate1 === 1 && this.rows[index].inGate1 === "○") {
				additionGate1 = -3;
			} else if(this.rows[index].countGate1 === 1) {
				additionGate1 = -2;
			} else if(this.rows[index].inGate1 === "○" && this.rows[index].countGate1 !== 0) {
				additionGate1 = -1;
			}
			
			if(this.rows[index].countGate2 === 1 && this.rows[index].inGate2 === "○") {
				additionGate2 = -3;
			} else if(this.rows[index].countGate2 === 1) {
				additionGate2 = -2;
			} else if(this.rows[index].inGate2 === "○" && this.rows[index].countGate2 !== 0) {
				additionGate2 = -1;
			}

			if(this.rows[index].countGate3 === 1 && this.rows[index].inGate3 === "○") {
				additionGate3 = -3;
			} else if(this.rows[index].countGate3 === 1) {
				additionGate3 = -2;
			} else if(this.rows[index].inGate3 === "○" && this.rows[index].countGate3 !== 0) {
				additionGate3 = -1;
			}

			if(this.rows[index].countGate4 === 1 && this.rows[index].inGate4 === "○") {
				additionGate4 = -3;
			} else if(this.rows[index].countGate4 === 1) {
				additionGate4 = -2;
			} else if(this.rows[index].inGate4 === "○" && this.rows[index].countGate4 !== 0) {
				additionGate4 = -1;
			}

			if(this.rows[index].countGoal === 1 && this.rows[index].inGoal === "○") {
				additionGoal = -4;
			} else if(this.rows[index].countGoal === 1) {
				additionGoal = -2;
			} else if(this.rows[index].inGoal === "○" && this.rows[index].countGoal !== 0) {
				additionGoal = -2;
			}

			return (
				additionGate1 + 
				additionGate2 +
				additionGate3 + 
				additionGate4 +
				additionGoal
			);
		},
	},
	components: {
		'counter-hit': counterHit,
		'hoop-in': hoopIn,
	},
});

style.cssに変更はありません。

おわりに

Vue.jsで、Excelのような表計算機能を実装する方法について解説してみました。
methodsやMustache構文を使うことで実装出来ました。

今回の記事が皆さんの参考になれば幸いです。
以上、ちゃんカマでした。

コメント

タイトルとURLをコピーしました