I'm developing a website with a homepage that serves as an entry point to the rest of the site (it welcomes the user and allows them to click anywhere to access the main website). The following code accomplishes this:
<template>
<div onclick="window.location.href='#/ordering';" style="cursor:pointer; width:100%; height:100%;">
<div id="textpage"> <h2>XXX </h2>
<h3> {{ uiLabels.welcomeText }} </h3>
</div>
</div>
</template>
The website is designed to support two languages, where uiLabels.thing retrieves "thing" in either language. I now intend to add a button for changing the language. Here's what I have done:
<button v-on:click="switchLang()">{{ uiLabels.language }}</button>
where switchLang() is a function that updates the language variable, thereby switching the displayed language on my page. However, there's an issue where the link takes precedence over the button, causing users to be redirected to the main website when they click the button.
I need the button to be positioned at the bottom left of the page.
If I include the button code in a div before the link div, it ends up being stacked on top of the page which looks unattractive.
If I place the button inside the link div, it appears right below the welcome text but becomes unresponsive.
If I try putting it in a div after the link div, I receive an error message stating that only one root element is allowed.
One potential solution is to move the button outside the linking div, but then I lose the ability to position it where I want.