From f4e6ab9d0c9a6e6274969f3448255c3fa64cb889 Mon Sep 17 00:00:00 2001
From: Gaffen <matt@gaffen.co.uk>
Date: Wed, 14 Aug 2019 23:16:03 +0100
Subject: [PATCH] get data configured for list element

---
 layouts/base.njk               |  2 +-
 layouts/home.njk               |  1 +
 src/js/components/ListComp.vue | 25 +++++++++++++------------
 src/js/main.js                 |  2 +-
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/layouts/base.njk b/layouts/base.njk
index ee0cf90..a3e6acd 100644
--- a/layouts/base.njk
+++ b/layouts/base.njk
@@ -5,7 +5,7 @@
       {% include "partials/sprite.svg" %}
     </div>
 		<header>
-      <h1>Your brand-spanking new Kindling website!</h1>
+      <h1>SSR Rendering in Nunjucks proof of concept</h1>
 		</header>
     {% block body %}
       {{ content | safe }}
diff --git a/layouts/home.njk b/layouts/home.njk
index 2d746b3..398faf7 100644
--- a/layouts/home.njk
+++ b/layouts/home.njk
@@ -4,6 +4,7 @@
 {% vue { component:"HelloWorld" } %}
 {% vue { component:"HelloWorld", props: { message: "This is a test" } } %}
 {% vue { component:"HelloWorld", props: { message: "Of server rendered Vue components" } } %}
+{% vue { component:"ListComp"} %}
 {% vue { component:"ListComp", props: { startlist: [{message:"Render Vue in Nunjucks"}, {message:"???"}, {message:"Profit!"}] } } %}
 <section id="content" role="main" class="content-wrapper">
   {{content|safe}}
diff --git a/src/js/components/ListComp.vue b/src/js/components/ListComp.vue
index 630e5ed..e9725a8 100644
--- a/src/js/components/ListComp.vue
+++ b/src/js/components/ListComp.vue
@@ -1,12 +1,15 @@
 <template lang="html">
   <div class="ListComp" v-bind:data-startlist="startlist">
     <ol>
-      <li v-for="item in list">
-        {{ item.message }}
+      <li v-for="(item, index) in list">
+        <p>{{ item.message }}</p>
+        <button v-on:click="removeItem(index)">&times;</button>
       </li>
     </ol>
-    <input v-model="newitem.message" />
-    <button v-on:click="addItem"></button>
+    <form v-on:submit.prevent>
+      <input v-model="newitem.message" />
+      <button v-on:click="addItem">Add</button>
+    </form>
   </div>
 </template>
 
@@ -15,24 +18,22 @@ import Vue from "vue";
 export default {
   props: {
     startlist: {
-      type: Array,
-      default: function() {
-        return [{ message: "Add items to me" }];
-      }
+      type: String,
+      default: JSON.stringify([{ message: "Add items to me" }])
     }
   },
   data: function() {
     return {
       newitem: { message: "Enter text here" },
-      list: [].concat([this.startlist])
+      list: [].concat(JSON.parse(this.startlist))
     };
   },
-  mounted: function() {
-    console.log(this.startlist);
-  },
   methods: {
     addItem: function(e) {
       this.list = this.list.concat([Object.assign({}, this.newitem)]);
+    },
+    removeItem: function(e) {
+      this.list = this.list.slice(0, e).concat(this.list.slice(e + 1));
     }
   }
 };
diff --git a/src/js/main.js b/src/js/main.js
index 15e6989..30d1399 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -15,6 +15,6 @@ Array.prototype.forEach.call(document.querySelectorAll(".ListComp"), function(
   elem
 ) {
   new Vue({
-    render: h => h(ListComp, { props: { message: elem.dataset.list } })
+    render: h => h(ListComp, { props: { startlist: elem.dataset.startlist } })
   }).$mount(elem);
 });