I am looking for a way to pass a list of meta/props to multiple components based on the route. Currently, I have hardcoded the todo list, and it is not dynamically loaded. My current solution only works when I click from the list to go to an item. However, if I try to navigate directly or refresh the page, I lose the meta param.
My question is, how can I maintain this on page refresh? Is there a better approach to managing this?
You can check out the codesandbox example here.
// todo.vue
<template>
<div class="todos">
<h1>Todos</h1>
<stats :value="total" label="Total"></stats>
<stats :value="completed" label="Completed"></stats>
<stats :value="pending" label="Pending"></stats>
<todo-list :todos="todos"></todo-list>
</div>
</template>
<script>
import Stats from "../components/Stats";
import TodoList from "../components/TodoList";
export default {
name: "Home",
components: {
"todo-list": TodoList,
stats: Stats
},
data() {
return {
limit: 20,
todos: [
{
userId: 1,
id: 1,
title: "delectus aut autem",
completed: false
},
{
userId: 1,
id: 2,
title: "quis ut nam facilis et officia qui",
completed: false
}
]
};
},
computed: {
total: function() {
return this.todos.length;
},
completed: function() {
return this.todos.filter(function(todo) {
return todo.completed === true;
}).length;
},
pending: function() {
return this.todos.filter(function(todo) {
return todo.completed === false;
}).length;
}
}
};
</script>
// todo list
<template>
<ul v-if="todos.length > 0">
<li v-for="todo in todos" :key="todo.id">
<router-link :to="{name: 'singletodo', params: {id: todo.id, meta: todo}}">
<span :class="todo.completed ? 'completed' : ''">{{ todo.title }}</span>
</router-link>
</li>
</ul>
</template>
<script>
export default {
name: "TodoList",
props: ["todos"]
};
</script>
<style scoped>
.completed {
color: gray;
text-decoration: line-through;
}
ul {
margin-top: 2em;
margin-left: 1em;
}
li {
list-style: square;
}
</style>
// Router config
const routes = [
{ path: "/", name: "home", component: Home },
{ path: "/about", name: "about", component: About },
{ path: "/todos", name: "todo", component: Todos },
{ path: "/todos/:id", name: "singletodo", component: TodoSingle }
];
const router = new Router({
routes
});