get data configured for list element

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 }}

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}}

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">
+      <li v-for="(item, index) in list">
-        {{ item.message }}
+        <p>{{ item.message }}</p>
+        <button v-on:click="removeItem(index)">&times;</button>
       </li>
     </ol>
+    <form v-on:submit.prevent>
       <input v-model="newitem.message" />
-    <button v-on:click="addItem"></button>
+      <button v-on:click="addItem">Add</button>
+    </form>
   </div>
 </template>
 
@@ -15,24 +18,22 @@ import Vue from "vue";
 export default {
   props: {
     startlist: {
-      type: Array,
+      type: String,
-      default: function() {
+      default: JSON.stringify([{ message: "Add items to me" }])
-        return [{ 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));
     }
   }
 };

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);
 });