3.7.4.3
Info app

This example app displays a list of HTTP status codes and gives a longer description when the user clicks on each item (tab navigation). This can be adapted to display any kind of information / reference material which organizes information in a list and needs more content per item on demand.

???

All items are stored in the Vue.js app as the property statusCodes. This is a list (indicated by [ and ]), which contains objects (indicated by { and }). Each object contains the code, title and description of the status code.

The codes are displayed in a list element (ul). Each code has a button with a @click event. When the user clicks on the button, the selectStatus method is called and the corresponding status is passed along. The selectStatus method sets the currentStatus property, which in turn is displayed in the HTML if it is set.

index.html


	<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP Status Codes</title>
</head>
<body>
    <div id="app">


	        <p>Some selected HTTP status codes, copied from <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#server_error_responses" target="_blank">here</a>.</p>
        
        <ul>
            <li v-for="status in statusCodes">
                <button @click="selectStatus(status)">{{ status.code }} {{ status.title }}</button>
            </li>
        </ul>

        <main v-if="currentStatus">
            <h1>{{ currentStatus.code }} {{ currentStatus.title }}</h1>
            <p>{{ currentStatus.description }}</p>
        </main>


	    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="script.js"></script>
</body>
</html>

script.js


	const { createApp, ref } = Vue

createApp({
    data () {
        return {
            currentStatus: undefined,
            statusCodes: [
                {
                    code: 200,
                    title: 'OK',
                    description: 'The request succeeded.'
                },
                {
                    code: 400,
                    title: 'Bad Request',
                    description: 'The server cannot or will not process the request.'
                },
                {
                    code: 401,
                    title: 'Unauthorized',
                    description: 'Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated".'
                },
                {
                    code: 403,
                    title: 'Forbidden',
                    description: 'The client does not have access rights to the content; that is, it is unauthorized, so the server is refusing to give the requested resource.'
                },
                {
                    code: 404,
                    title: 'Not Found',
                    description: 'The server cannot find the requested resource.'
                },
                {
                    code: 500,
                    title: 'Internal Server Error',
                    description: 'The server has encountered a situation it does not know how to handle.'
                }
            ]
        }
    },

    methods: {
        selectStatus (code) {
            this.currentStatus = code
        }
    }
}).mount('#app')

3.7.4.3 Info app

index.html

script.js

3.7.4.3
Info app