1 files changed, 19 insertions, 11 deletions
diff --git a/src/client/components/page/page.text-input.vue b/src/client/components/page/page.text-input.vue
index f0fe70e335..e67814af16 100644
--- a/src/client/components/page/page.text-input.vue
+++ b/src/client/components/page/page.text-input.vue
@@ -1,36 +1,44 @@
 <template>
 <div>
-	<MkInput class="kudkigyw" v-model:value="v" type="text">{{ hpml.interpolate(value.text) }}</MkInput>
+	<MkInput class="kudkigyw" :value="value" @update:value="updateValue($event)" type="text">{{ hpml.interpolate(block.text) }}</MkInput>
 </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 import MkInput from '../ui/input.vue';
 import * as os from '@/os';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { TextInputVarBlock } from '@/scripts/hpml/block';
 
 export default defineComponent({
 	components: {
 		MkInput
 	},
 	props: {
-		value: {
+		block: {
+			type: Object as PropType<TextInputVarBlock>,
 			required: true
 		},
 		hpml: {
+			type: Object as PropType<Hpml>,
 			required: true
 		}
 	},
-	data() {
+	setup(props, ctx) {
+		const value = computed(() => {
+			return props.hpml.vars.value[props.block.name];
+		});
+
+		function updateValue(newValue) {
+			props.hpml.updatePageVar(props.block.name, newValue);
+			props.hpml.eval();
+		}
+
 		return {
-			v: this.value.default,
+			value,
+			updateValue
 		};
-	},
-	watch: {
-		v() {
-			this.hpml.updatePageVar(this.value.name, this.v);
-			this.hpml.eval();
-		}
 	}
 });
 </script>