using v-model and watch

goellner · Feb 11, 2021 · 3eae191 · 3eae191
1 parent 7a36917
commit 3eae191
Show file tree

Hide file tree

Showing 2 changed files with 8,197 additions and 10 deletions.
diff --git a/resources/dist/js/table_on_steroids-fieldtype.js b/resources/dist/js/table_on_steroids-fieldtype.js
diff --git a/resources/js/TableOnSteroids.vue b/resources/js/TableOnSteroids.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Table @input="handleTableInput" :value="value" />
+    <Table v-model="data" />
     <label class="form-group-label mt-2 mb-1">Paste your CSV into this field:</label>
     <textarea class="input-text w-full mb-2" v-model="csv" rows="4"></textarea>
     <button class="btn btn-default mb-2 mr-1" @click="csvToJavascript">Process CSV Data</button>
@@ -9,13 +9,13 @@
   </div>
 </template>
 <script>
+
 import parse from 'csv-parse/lib/sync'
+
 const Table = Vue.component('table-fieldtype')
+
 export default {
   mixins: [Fieldtype],
-  props: {
-    value: Array,
-  },
   data() {
     return {
       csv: '',
@@ -26,10 +26,25 @@ export default {
   components: {
     Table,
   },
-  methods: {
-    handleTableInput(data) {
-      this.update(data)
+  watch: {
+    // safe guard if value prop changes from outside
+    value: {
+      deep: true,
+      handler(data) {
+        this.data = data;
+      }
     },
+    data: {
+      deep: true,
+      handler(data) {
+        this.update(data);
+      }
+    }
+  },
+  created() {
+    this.data = this.value;
+  },
+  methods: {
     handleClearInput() {
       this.csv = ''
     },
@@ -57,7 +72,7 @@ export default {
           }
           result.push(line)
         })
-        this.value = result
+        this.data = result
       } catch (e) {
         this.error = e.message
       }