From bba0177f9f7357c0d4e2206dedb5e27a3df7132e Mon Sep 17 00:00:00 2001
From: Helmut Merz <helmutm@cy55.de>
Date: Sun, 19 Feb 2023 15:08:52 +0100
Subject: [PATCH] example code using v-model and v-effect

---
 assets/js/main.ts             |  8 +++++++-
 layouts/shortcodes/input.html | 16 ++++++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/assets/js/main.ts b/assets/js/main.ts
index 76d4991..4b1098a 100644
--- a/assets/js/main.ts
+++ b/assets/js/main.ts
@@ -3,9 +3,15 @@ import { createApp } from './lib/petite-vue.es.js'
 createApp({
 	$delimiters: ['{|', '|}'],
 	urlParams: new URL(location.href).searchParams,
-	mydata: Data(),
+	newdata: '',
+	data: '',
+	save
 }).mount()
 
+function save() {
+	this.data += '\n' + this.newdata
+}
+
 function Data() {
 	return {
 		data: '',
diff --git a/layouts/shortcodes/input.html b/layouts/shortcodes/input.html
index 50dd27c..a100152 100644
--- a/layouts/shortcodes/input.html
+++ b/layouts/shortcodes/input.html
@@ -1,11 +1,19 @@
 <div v-scope>
-  <input type="text" name="txt"
- 		 @change="mydata.save($el.value)" />
+  <input type="text" name="txt" autofocus
+		 v-model="newdata"
+ 		 @change="save" />
 </div>
 
 <div v-scope>
-  <pre>id = {| urlParams.get('id') |}</pre>
-  <pre v-effect="$el.textContent = mydata.data" ></pre>
+  <pre v-effect="$el.textContent = data" ></pre>
+</div>
+
+<div v-scope>
+  <pre v-effect="$el.textContent = newdata" ></pre>
+</div>
+
+<div v-scope>
+  <div>id = {| urlParams.get('id') |}</div>
 </div>