**User.vue**
<template>
<div>
<div v-for="list in lists" :key="list.id">{{ list.val }} {{ list.kk }}</div>
</div>
</template>
<script>
import { datalist } from "./datalist";
export default {
name: "User",
data() {
return {
lists: datalist,
};
},
};
</script>**datalist.js**
export const datalist = [ { id: 1, val: "11", kk: "potter" }, { id: 2, val: "22", kk: "james" }, { id: 3, val: "55", kk: "limda" }, { id: 4, val: "77", kk: "stepen" }];**HelloWorld.vue**
<template>
<div>
<b>Vuejs dynamic routing</b>
<div v-for="item in items" :key="item.id">
<b>{{ item.id }}.</b>
<router-link :to="{ name: 'UserWithID', params: { id: item.id } }">
{{ item.kk }}
</router-link>
</div>
<br /><br /><br />
<b> {{ $route.params.id }}</b>
<User />
</div>
</template>
<script>
import User from "./User.vue";
import { datalist } from "./datalist";
export default {
name: "HelloWorld",
components: {
User,
},
data() {
return {
items: datalist,
};
},
};
</script>我正在研究動態路由，在每個陣列值的 onclick 處，我正在動態獲取“id”。（如 1、2、3、4、5 ......）
現在我想顯示陣列值。僅特定于 id。喜歡...
如果我點擊id:1那么我只需要獲取與id:1鏈接的特定陣列值。2,3,4....的相似之處
目前的問題是，如果點擊“array id:2”或任何 id valuess.. 那么我得到整個陣列值串列。
1
11 波特 22 詹姆斯 55 利姆達 77 斯蒂芬
完整的作業代碼：- https://codesandbox.io/s/proud-fast-sokui?file=/src/components/HelloWorld.vue
uj5u.com熱心網友回復：
$route.params.id您可以通過in找到所需的用戶資訊User.vue。示例User.vue：
<div v-for="(item, key) in user" :key="key">
{{ item }}
</div>
...
computed: {
user: function () {
return this.lists.find((item) => item.id === this.$route.params.id);
},
}
演示 代碼框
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414932.html
標籤：