当我单击该 taskId 时，我正在尝试呈现特定的 id。现在，当我单击它时，它会将我带到路线/tasks/details/id#并显示 URL 中的特定 ID，但详细信息页面显示所有任务而不是我想查看的特定任务。我非常感谢您抽出宝贵时间对此进行审查，并在此先感谢您。
在 Vuex 中： 从“vuex”导入 { createStore }；
export default createStore({
state: {
tasks: [
{
id: 1,
projectType: "Web Development",
taskName: "Fixing Bug",
projectDescription: "Task Assigned to fix navbar bug",
dateCreated: "12/06/2021",
duration: 1,
status: "Completed",
completeDate: "12/06/2021",
notes: "difficult task, i posponed copuple of times",
},
{
id: 2,
projectType: "Python",
taskName: "Tutorials",
projectDescription: "Looking at python tutorials",
dateCreated: "12/06/2021",
duration: 1,
status: "Completed",
completeDate: "",
notes: "difficult task, i posponed copuple of times",
taskHistory: [],
},
],
},
mutations: {
addTask(state, payload) {
state.tasks.unshift(payload);
},
},
actions: {
addTask(context, data) {
const registerTask = {
id: Math.floor(Math.random() * 1000),
projectType: data.project,
taskName: data.task,
status: data.status,
duration: data.duration,
created: data.created,
completeDate: data.completed,
notes: data.notes,
history: data.history,
projectDescription: data.desc,
};
context.commit("addTask", registerTask);
},
},
getters: {
taskList(state) {
return state.tasks;
},
getByLength(state) {
return state.tasks.length;
},
getId: (state) => (id) => {
return state.tasks.find((task) => task.id === id);
},
},
modules: {},
});
在任务列表页面中：
<template>
<base-card class="wrapper">
<h2>Task Details</h2>
<base-button link :to="'/tasks/add'">Add task</base-button>
</base-card>
<items-list
v-for="task in tasks"
:key="task.id"
:id="task.id"
:project="task.projectType"
:description="task.projectDescription"
:task="task.taskName"
:duration="task.duration"
:created="task.dateCreated"
:complete="task.dateCompleted"
:status="task.status"
>
</items-list>
</template>
<script>
import ItemsList from "../components/layout/ItemsList.vue";
export default {
data() {
return {
};
},
components: { ItemsList },
computed: {
tasks() {
return this.$store.getters.taskList;
},
detailsLink() {
// id# passed from ItemsList to find specific id
return "/tasks/details/" + this.id;
},
},
};
ITEMSLIST组件：（将 props 传递给 TaskList 的组件）
<template>
<section>
<base-card class="wrapper">
<ul>
<li>
<h3>{{ project }}</h3>
</li>
<li><span>Task Name:</span> {{ task }}</li>
<li><span> Date Created:</span>{{ created }}</li>
<li><span> Status: </span> {{ status }}</li>
<li><span>Duration: </span>{{ duration }} hr</li>
<li><span>Description: </span> {{ description }}</li>
<li><span>Id#</span> {{ id }}</li>
<div class="buttons">
<base-button link :to="'/tasks/details/' + this.id"
>Details</base-button
>
</div>
</ul>
</base-card>
</section>
</template>
<script>
import BaseCard from "../ui/BaseCard.vue";
import BaseButton from "../BaseButton.vue";
export default {
props: [
"id",
"project",
"task",
"created",
"status",
"duration",
"description",
],
components: {
BaseCard,
BaseButton,
},
data() {
return {
};
},
computed: {
tasks() {
return this.$store.getters.taskList;
},
getByLength() {
return this.$store.getters.getByLength;
},
// getId() {
// return this.$store.getters.taskList.find((task) => task.id === this.id);
// },
},
};
</script>
最后，TaskDetails页面（将使用从 state.$store 来自 VUEX 的道具传递的 id 显示详细信息：
<template>
<base-card class="wrapper">
<h2>Task Details</h2>
</base-card>
<task-items
v-for="task in tasks"
:key="task.id"
:id="task.id"
:project="task.projectType"
:description="task.projectDescription"
:name="task.taskName"
:duration="task.duration"
:created="task.dateCreated"
:complete="task.dateCompleted"
:status="task.status"
:notes="task.notes"
:history="task.history"
></task-items>
<router-view></router-view>
</template>
<script>
import BaseCard from "../components/ui/BaseCard.vue";
import TaskItems from "../components/layout/TaskItems.vue";
export default {
components: { BaseCard, TaskItems },
data() {
return {};
},
computed: {
tasks() {
return this.$store.getters.taskList;
},
getById() {
return this.$store.getters.getId;
},
taskId() {
return this.$store.getters.getId.id;
},
},
};
</script>