Vooyáge: Day 3, Aug 26th

Day 3 of project week and things are really starting to shape up! I’m feeling more comfortable with Vue and leveraging it to capture data from the backend.

My team’s application has three parts:

• The login/create account page
• The dashboard, including a map where you can click on the city’s pin and a list of activities in that city will appear so that the user can favorite them
• A profile page that shows only the activities that the users favorited

Previously, we only had the login page and the dashboard set up. I was in charge of creating the “feel” of a profile page while maintaining the functionality of a single page application.

First, I created a button in HTML with the text “My Account”. The intention was to have the button empty the div of all the activities shown and toggle the text to say “Dashboard” to give the user the option to go back to the dashboard.

<!-- MY ACCOUNT / BACK TO DASHBOARD BUTTON -->
<div v-if="loggedin">
    <button id="acct-btn" v-on:click="toggleAccountButton">My Account</button>
</div>

Dashboard — The user clicks on the Tokyo pin on the map and a list of activities in Tokyo renders on the screen with heart buttons so they can favorite an activity

//////// TOGGLE BUTTON FROM 'MY ACCOUNT' TO 'DASHBOARD' ///////
    toggleAccountButton: function(event){
        if (!this.clicked){
            $("#acct-btn").text("My Account")
            this.onAccount = false
        } else {
            $("#acct-btn").text("Dashboard")
            this.onAccount = true
        }
        this.clicked = !this.clicked
       }
    },

The “My Account” button is attached to the v-on:click directive. This directive runs a method when the button is pressed. In this case, it runs the toggleAccountButtton method.

This method looks for the event (meaning the click) and passes it as a parameter for the function. clicked is a variable I defined in the data section of my Vue instance and I set its value to false. The if statement refers to the clicked variable using the keyword this, meaning it is referring to data within the same object that the function is in. The if statement checks if clicked is false, and if it is false, then it queries the HTML document for the button (which, attached it has an id called acct-btn) and keeps the button text to “My Account”. I also defined another variable called onAccount that I set to false in the Vue instance, which I will use later on to have certain items conditionally show on the screen usingv-if. It will keep the onAccount variable false if the button is not clicked.

The else statement queries for the same button, changes the button’s text to “Dashboard” and changes onAccount to true. I attached the directive v-if= “!onAccount && loggedin” to the div containing the activities, so that the div only shows if the user is logged in and NOT on their account page. This shows all the activities for one location for one city, only when you’re on the dashboard.

Coming up on day 4 — making only the user’s favorited activities show up on their profile page…