【初心者です】Vue.js 複数フォームに入力された数値を合計して表示させたい

Question

前提・実現したいこと

Vue.jsで点数計算をするアプリを制作しています。
「＋」と「ー」のボタンを押下すると、フォーム内の打数の数値が増減する機能は実装出来ました。
現在は５つの打数を合計して、総打数に表示させる機能を実装中です。

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

｛｛count｝｝で表示させようとすると、エラーになります。
「countはコンポーネント内で定義されているので、コンポーネントの外では使えません」といった意味のエラーメッセージだと思います。

私としても、「確かにその通りだよなあ」と思います。

コンポーネントの外の処理に問題があると思うので、new Vue({});の中にコードを書き加える必要があるのかと思いますが、具体的にどうすれば良いのかわかりません。

Property or method "count" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

該当のソースコード

	<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">{{ count }}</div>
				</th>
				<th class="bg-light">
					<div class="addition"></div>
				</th>
				<th>
					<div class="total"></div>
				</th>
			</tr>
		</tbody>
	</table>

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,
		'hoop-in': hoopIn,
	},
});

試したこと

new Vue({});の中にcomuputedを使った処理を書いたりしたのですが、ダメでした。

v-model="count"でcountという名前でフォームの数値は取得していると思うので、そのcountをコンポーネントの外で使用することが出来れば解決出来るのではと感じています。

Answer 1

この場合、子のコンポーネントから親のコンポーネントにデータを渡してあげる必要があります。
今回の場合でいうと、親コンポーネントはテーブルの部分で、子のコンポーネントはcounterです。

子から親へデータを渡す場合は、emitを使用します。

// 親コンポーネント
<template>
  <div>
    <counter @up='up' @down='down' />
    <counter @up='up' @down='down' />
    TOTAL: {{ total }}
  </div>
</template>

<script>
  data: () => ({
    total: 0,
  }),
  methods: {
    up () {
      this.total++
    },
    down () {
      this.total--
    }
  }
</script>

// 子コンポーネント
<template>
  <div>
    <button @click="countUp">+</button>
    <input type="number" v-model="count">
    <button @click="countDown">-</button>
  </div>
</template>

<script>
    export default {
        data: () => ({
            count: 0,
        }),
        methods: {
            countUp () {
                if (this.count < 0) {
                    this.count = 0
                } else {
                    this.count += 1
                    this.$emit('up')
                }
            },
            countDown () {
                if (this.count <= 0) {
                    this.count = 0
                } else {
                    this.count -= 1
                    this.$emit('down')
                }
            },
        },
    }
</script>

子コンポーネント内のthis.$emitの部分で親のupメソッドなどを発火させています。
また、第２引数に渡したいデータを指定して、渡すことも可能です。

// 子コンポーネント
this.$emit('up', 1)

/// 親コンポーネント
up (val) {
  console.log(val) -> 1
}

Comments

[chan-kama]

$emitは公式リファレンスにありましたが、いまいち使い方がわかっていませんでした。

機能の実装が出来ました。ありがとうございました。

[stakizawa]

解決出来てなによりです。
慣れてきたら、vuexなどを使ってみるとより簡単に実装可能かと思います。

Answer 2

Property or method "count" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

counterコンポーネート外ではcountが定義されていないにも関わらず{{count}}で呼び出そうとしているため

Comments

[chan-kama]

回答ありがとうございます。

エラーメッセージの内容を見て、自分でも「その通りだよなあ」と思います。
しかし、具体的にどのようにコードを直せば良いのか分かりません。

[mikkame]

具体的には
> <div class="sum">{{ count }}</div>

が存在するためにそのエラーがでます。