Vue. js передача массивов или объектов в дочерний компонент через маршрутизатор - PullRequest
Новая
       21

Vue. js передача массивов или объектов в дочерний компонент через маршрутизатор

0 голосов
/ 17 февраля 2020

У меня есть массив пользовательских объектов. Я хотел бы составить список пользователей, на которые можно нажимать, и каждый элемент, обернутый в элемент маршрутизатора. Когда пользователь щелкает элемент списка, я хочу направить его к дочернему компоненту внутри маршрутизатора, который должен отображать одного пользователя, которого я каким-то образом передал в качестве реквизита через маршрутизатор моему дочернему компоненту, или непосредственно как реквизиты моего дочернего компонента, который затем вызывается маршрутизатором ... здесь 

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 -.-

РЕДАКТИРОВАТЬ: Я думаю, что я наконец понял это: мой пользователь. 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>

my 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>
...