Got healthbars persisting data to the database

app/imports/ui/character/StatsTab.vue

@@ -2,16 +2,7 @@
 	<div class="stats-tab ma-2">
 
 		<div class="px-2 pt-2">
-			<v-card>
-				<v-card-text>
-					<health-bar
-						v-for="healthBar in healthBars"
-						:key="healthBar._id"
-						:value="healthBar.value + (healthBar.adjustment || 0)"
-						:maxValue="healthBar.value"
-					/>
-				</v-card-text>
-			</v-card>
+			<health-bar-card-container :charId="charId"/>
 		</div>
 
 		<column-layout>
@@ -97,7 +88,7 @@
 	import AttributeCard from '/imports/ui/components/AttributeCard.vue';
 	import AbilityListTile from '/imports/ui/components/AbilityListTile.vue';
 	import ColumnLayout from "/imports/ui/components/ColumnLayout.vue";
-	import HealthBar from '/imports/ui/components/HealthBar.vue';
+	import HealthBarCardContainer from '/imports/ui/components/HealthBarCardContainer.vue';
 	import HitDiceListTile from '/imports/ui/components/HitDiceListTile.vue';
 	import SkillListTile from '/imports/ui/components/SkillListTile.vue';
 
@@ -113,20 +104,11 @@
 			AbilityListTile,
 			AttributeCard,
 			ColumnLayout,
-			HealthBar,
+			HealthBarCardContainer,
 			HitDiceListTile,
 			SkillListTile,
 		},
 		meteor: {
-			healthBars(){
-				return Attributes.find({
-					charId: this.charId,
-					type: 'healthBar',
-					value: {$ne: 0},
-				}, {
-					sort: {order: 1},
-				});
-			},
 			abilities(){
 				return getAttributeOfType(this.charId, 'ability');
 			},

app/imports/ui/components/HealthBarCard.vue

@@ -0,0 +1,26 @@
+<template lang="html">
+	<v-card>
+		<v-card-text>
+			<health-bar
+				v-for="attribute in attributes"
+				:key="attribute._id"
+				:value="attribute.value + (attribute.adjustment || 0)"
+				:maxValue="attribute.value"
+				@change="e => $emit('change', {_id: attribute._id, change: e})"
+			/>
+		</v-card-text>
+	</v-card>
+</template>
+
+<script>
+	import HealthBar from '/imports/ui/components/HealthBar.vue';
+
+	export default {
+		props: {
+			attributes: Array,
+		},
+		components: {
+			HealthBar,
+		},
+	}
+</script>

app/imports/ui/components/HealthBarCardContainer.vue

@@ -0,0 +1,40 @@
+<template lang="html">
+  <health-bar-card
+		:attributes="attributes"
+		@change="healthBarChanged"
+	/>
+</template>
+
+<script>
+	import Attributes from '/imports/api/creature/properties/Attributes.js';
+	import { adjustAttribute } from '/imports/api/creature/properties/Attributes.js';
+	import HealthBarCard from '/imports/ui/components/HealthBarCard.vue';
+
+	export default {
+		components: {
+			HealthBarCard,
+		},
+		props: {
+			charId: String,
+		},
+		meteor: {
+			attributes(){
+				return Attributes.find({
+					charId: this.charId,
+					type: 'healthBar',
+					value: {$ne: 0},
+				}, {
+					sort: {order: 1},
+				});
+			},
+		},
+		methods: {
+			healthBarChanged({_id, change}){
+				adjustAttribute.call({
+					_id,
+					[change.type]: change.value
+				});
+			},
+		},
+	};
+</script>