A Recipe for Nesting Components Within a List in Vue.js and Vuex

So, this situation baffled me for a while. In my state object, I have a list of keys, and then I have an object that contains the data for all the keys. It looks like so:

<event-list :list="this.$store.state.list"></event-list>
<ul>
<li v-for='key in list'>
<event-list-item :ikey="key"></event-list-item>
</li>
</ul>
<ul>
<li v-for='key in list'>
<event-list-item :key="key" :ikey="key"></event-list-item>
</li>
</ul>
<DOCTYPE html>
<html>
<head>
<title>Test Vue List</title>
<meta charset='utf-8' />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="events" class="main">
<h1>Event List</h1>
<event-list :list="this.$store.state.list" />
</div>
<script>
var mapState = Vuex.mapStateconst store = new Vuex.Store({
state: {
list: ["key1", "key2", "key3"],
items: {
key1: {title: "Title 1"},
key2: {title: "Title 2"},
key3: {title: "Title 3"},
}
}
})
Vue.component('event-list', {
template: "<ul><li v-for='key in list'><event-list-item :key=\"key\" /></li></ul>",
props: {
list: {
type: Array,
required: true
}
}
})
Vue.component('event-list-item', {
template: "<h4>{{ item.title }}</h4>",
data: function() {
return {
item: store.state.items[this.$vnode.key]
}
}
})
var app = new Vue({
el: '#events',
store
})
</script>
</body>
</html>
Isn’t it nice to code in a coffee shop? My favorite. None of these people are me. It’s a stock photo.

Building web applications since 1992. Crikey, that’s a long time.