Question

我有一个用户对象数组。.我想列出一个可点击的用户列表，并将每个元素包装在一个router元素中，当用户单击list元素时，我想路由到router内的子组件，它应该显示一个用户，我以某种方式将其作为道具通过路由器传递给我的子组件，或者直接作为道具传递给我的子组件，然后由路由器调用...这是

my user.vue:

<template>
    <div>
        <p>{{ msg }}</p>
        <br /><br />
        <p>{{ getmsg() }}</p>
        <br /><br />
        <ul id="userlist">
            <li v-for="(user, index) of users" :key="index">
                <router-link :to="{ name: 'userdetail', params: {id: index}, props: {user: user} }">

                    <UserDetail :to="{ name: 'userdetail', params: {id: index}, props: user }"/>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
import UserDetail from './UserDetail';
let user = {};

const userArray = [
    { name: 'Marc', age: 33, secret: 'Hello world!' },
    { name: 'Flo', age: 88, secret: "I'm the second user!" },
    { name: 'Jenny', age: 53, secret: 'Tolle app' },
    { name: 'Alex', age: 23, secret: 'Keine Ideen mehr' }
];
export default {
    name: 'User',
    components: {
        UserDetail
    },
    data: function() {
        return {
            users: userArray
        };
    },
    computed: {
        msg: function() {
            return 'computed message!';
        }
    },
    methods: {
        getmsg: function() {
            return 'This is a method message!';
        }
    }
};
</script>

<style scoped>
#userlist {
    list-style: none;
}
</style>

以某种方式，我只是无法解决如何将单个用户传递到我的路径参数或组件Direclty -.-

编辑：我想我终于明白了：我的User.vue：

<template>
    <div>
        <p>{{ msg }}</p>
        <br /><br />
        <p>{{ getmsg() }}</p>
        <br /><br />
        <ul id="userlist">
            <li v-for="(user, index) of users" :key="index">
                <router-link :to="{ name: 'userdetail', params: user }">
                    name: {{user.name}}, age: {{user.age}}
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
import UserDetail from './UserDetail';
let user = {};

const userArray = [
    { name: 'Marc', age: 33, secret: 'Hello world!' },
    { name: 'Flo', age: 88, secret: "I'm the second user!" },
    { name: 'Jenny', age: 53, secret: 'Tolle app' },
    { name: 'Alex', age: 23, secret: 'Keine Ideen mehr' }
];
export default {
    name: 'User',
    components: {
        UserDetail
    },
    data: function() {
        return {
            users: userArray
        };
    },
    computed: {
        msg: function() {
            return 'computed message!';
        }
    },
    methods: {
        getmsg: function() {
            return 'This is a method message!';
        }
    }
};
</script>

<style scoped>
#userlist {
    list-style: none;
}
</style>

我的UserDetail.vue：

<template>
    <div>
        <p>
            User:  {{this.$route.params.name}}
        </p>
    </div>
</template>

<script>


export default {
    name: 'Userdetail',
    props: ['user'],
    data: function() {
        return {
            //user: this.$route.params
        };
    },
    created: function (context) {
    // `this` points to the vm instance
    console.log('Route params is: ' , this.$route.params)
  }
};
</script>

<style scoped></style>

Vue.js通过路由器将数组或对象传递给子组件

0 个答案: