I am currently working on a Vue.js example where I aim to consolidate everything into a single file. My goal is to demonstrate the efficiency of using a small silo that can serve multiple routes. Here is what I have accomplished so far:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index2</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script>
</head>
<body>
<div class="container">
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/categories">Categories</router-link>
</p>
<router-view></router-view>
</div>
</div>
<script>
const Foo = { template: '#foo' }
const Categories = {
template: '#Categories',
data: {
categories: [{ title: "blah" }, {title:"yack"}]
},
methods: {
saveNew: function(event) {
alert("boo!");
}
}
}
const routes = [
{ path: '/foo', component: Foo },
{ path: '/Categories', component: Categories }
];
const router = new VueRouter({
routes: routes,
mode: 'history',
base: '/forums/admin/index2/'
});
const app = new Vue({
router
}).$mount('#app');
Vue.config.devtools = true;
</script>
<template id="foo">
<div>foo</div>
</template>
<template id="Categories">
<div class="form-inline">
<input type="text" name="newCategoryTitle" class="form-control" />
<input type="button" v-on:click="saveNew" value="AddNew" class="btn btn-primary" />
</div>
<ul>
<li v-for="category in categories">{{category.title}}</li>
</ul>
<table class="table">
<tr v-for="category in categories">
<td>{{category.title}}</td>
<td><input type="button" value="Edit" class="btn btn-primary" /></td>
<td><input type="button" value="Delete" class="btn btn-primary" /></td>
</tr>
</table>
</template>
</body>
</html>
https://jsfiddle.net/jeffyjonesx/sd79npwb/1/
My issue lies in the fact that the data within the Categories component does not properly bind to the template, especially when using a ul or table. Strangely enough, moving the ul to the beginning of the template causes it to break. However, the button handler on the loaded form functions correctly.
I believe I may be misunderstanding how to declare the templates, but I am unsure of the correct approach. Any guidance would be greatly appreciated.