Vue Concat String with Space

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3.2.26/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Concat String with Space</h3>
        <p>Question:{{question}} </p>
        <p>option 1:{{option1}} </p>
        <p>Option 2: {{option2}}</p>
        <p>Option 3: {{option3}}</p>
        <p>Option 4:{{option4}} </p>
        <button @click="concatWithSpace">click me to concat</button>
        <pre v-if="result">Concat with Space:{{result}}</pre>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    question: 'The National Stock Exchange (NSE) is located a',
                    option1: 'Mumbai',
                    option2: ' Chennai ',
                    option3: 'New Delhi',
                    option4: 'Kolkata',
                    result: ''
                }
            },
            methods: {
                concatWithSpace() {
                    this.result = `${this.question} ${this.option1} ${this.option2} ${this.option3} ${this.option4}`;
                }
            }
        });app.mount('#app');
    </script>
    <style scoped>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
        }

p {
            margin: 10px 0;
        }

button {
            padding: 10px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

button:hover {
            background-color: #2E8B57;
        }

pre {
            font-size: 16px;
            white-space: pre-wrap;
            word-wrap: break-word;
            background-color: #fff;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
    </style>

</body>

</html>