In this exercise you will learn about directives with focus on conditional one (v-if) and loops (v-for)

In the last tutorial you learned how to pass data from a parent to a child component. In this tutorial you will reuse the child component in another component to understand the benefits of reusable components.

Additionally you will emit an event from a child component (this.$emit('functionCalledInParent')) to inform the parent component something has happened. (Here a user has clicked on a card).

Now have fun with this tutorial! 😏🖳

# download branch (make sure you are one level above vueTut)
git clone -b origin/exercise/02_directives https://github.com/na018/vue_basics_tut.git vueTut/02_directives && cd vueTut/02_directives

#prerequisite: node.js is installed
node -v                                      #returns for example v8.2.1

# install dependencies
npm i

#start the json mock server
node server.js

# run the application (should open a browser window automatically)
npm start

In src/components/userAdminComponents/ActivateUser.vue:

1. |KB-3| use 'src/components/userAdminComponents/UserCard.vue' <m-user-card> for displaying the user nicely (reuse the component built in the previous tutorial)
2. |KB-4| implement the method setActive(), which is activated when a user click on the btn. This method should tell the parent component to update it's activeUser

in src/components/pages/UserAdmin.vue:

1. |KB-3| define activeUser:{} Object and allUsers: {} Object & delete onePerson*
2. |KB-3| loop over allUsers and display them in <m-activate-user> component
3. |KB-4| <m-activate-user> emits the event changeActiveUser() the activeUser should be updated, but only if it is not already the active User

• hints

    activeUser: {
        userName: "heroHunter",
        id: 3,
        firstName: "Hero",
        lastName: "Hunter",
        img: "/static/img/avatars/hero.png",
    },
    allUsers: {
        colin: {
            userName: "colin",
            id: 1,
            firstName: "Colin",
            lastName: "Conjurer",
            img: "/static/img/avatars/avatar-male-1.png",
        },
        jess: {
            userName: "jess",
            id: 2,
            firstName: "Jessi",
            lastName: "James",
            img: "/static/img/avatars/avatar-female-1.png",
        },
        heroHunter: {
            userName: "heroHunter",
            id: 3,
            firstName: "Hero",
            lastName: "Hunter",
            img: "/static/img/avatars/hero.png",
        },
    },

Nadin-Katrin Apel, David Bochan, Alex Schübl

(Awesome that you kept reading til down here)

Now are you ready to take the next challenge? Then what keeps you still waiting? -

Continue with Exercise 4: Global state management with Vuex