How can I prevent the focus from being removed from a button within a v-for loop?

I am facing an issue with three buttons that act as choices on a page. When a user selects one of them, the background color changes using :focus in CSS. However, when the user clicks on a submit button to run a function without reloading the page, the focus is removed from the chosen button and the background color reverts back. How can I ensure that the button stays focused even after clicking on the submit button?

<button class="btn btn-lg text-white mark-answers" 
 v-for="(item, index) in markAnswers" :key="index" v-on:click="answerMarked">
   <span style="color: #000;">   {{ item.answer }}       </span> 

.mark-answers  {

font-size: 23px !important;
font-weight: bold;
display:list-item !important;
background-color: #fb3;
width: 500px;

}

.mark-answers:hover {

background-color: #ffd98a;
} 

.mark-answers:focus {

background-color:#f7f2ff;
}
javascripthtmlcssvue.js

Answer №1

To maintain the style of a button even after it loses focus, consider adding a "selected" class based on the current state in Vue and styling that instead of using the :focus state. You can achieve this by applying conditional class names, where 'item.marked' represents the selected value in the state:

<button 
  :class="{
    'btn': true,
    'btn-lg': true,
    'marked': item.marked,
  }"
  v-for="(item, index) in markAnswers" 
  :key="index" 
  v-on:click="answerMarked"
>
  <span style="color: #000;">{{ item.answer }}</span> 
</button>

In the case of a quiz form where only one answer can be marked, it is advisable to use radio buttons (

<input type="radio" />
). These can also be styled as desired, particularly their labels.

Answer №2

My approach to this problem involved implementing a solution that maintains the desired background color for selected buttons even after clicking the submit button on the page.

 <button class="btn btn-lg text-white align-self-center mark-answers" 
 v-for="(item, index) in markAnswers" :key="index" v-on:click="answerMarked(index)" 
 v-bind:style="[(quiz.markedIndex == (index)) ? {backgroundColor: '#f7f2ff'} : {backgroundColor: ''}]">

 methods: {
 answerMarked: function(index) {

 this.quiz.markedIndex = index;

    },
 },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strange Footer Interactions in Internet Explorer and Webkit

Currently facing an unusual issue: If you visit XX, you'll notice a black footer at the bottom - well, at least on Firefox and Chrome. In Safari, the Footer is not visible at all, and I am unable to figure out why. Adding a slight margin-top:200px; t ...

htmlcssinternet-explorersafarifooter

How can I replace specific text with HTML code in a webpage?

In my application, users have the ability to write comments that may contain HTML code. However, this code is escaped before being displayed: <div class="card-body"> <p class="card-text"> &lt;h1&gt;HOLA&lt;/h1&gt; Cita:#2&am ...

javascriptjqueryregex

Empty nested Map in POST request

I am currently working on a springboot application with a React/Typescript frontend. I have defined two interfaces and created an object based on these interfaces. export interface Order { customer_id: number; date: Date; total: number; sp ...

javascriptjsonreactjstypescriptfetch

Discover the process of implementing Firebase Authentication in Deno Fresh!

I've been trying to set up authentication in Fresh using the official Firebase documentation, https://firebase.google.com/docs/auth but I can't seem to get it to work. Does anyone know of any other resources like docs, articles, or blogs that co ...

javascriptnode.jstypescriptdeno

Using my aspx page as the central point for my web application, incorporating HTML5 codes for development

I created an aspx file for my GUI, image buttons, and image slide shows using HTML5, CSS, and javascript. I finished the HTML5 part in the aspx file format within visual studio 2012. To standardize my GUI for all other web forms, I tried creating a new mas ...

javascriptcsshtmlvisual-studiomaster-pages

Using AngularJS to Trigger a Click Event on an Element

Within the ng-view, a partial is being inserted containing the relevant code snippet below: <tr ng-repeat="group in groups"> <td><a href="" class="restaurant-group-edit" create-link>{{ group.name }}</a></td> <td> ...

javascriptjqueryangularjs

Using jsTree to Connect to Objects in a Domain

I'm looking for a way to link each node in my tree with a domain object. Previously, I was passing HTML data and storing the domain object manually using jQuery data: $('li node description').data('obj', my_domain_object); Howeve ...

javascriptjqueryjsonjstree

Arrange the columns in the Table in both ascending and descending order

While working on my React and MUI Table project, I encountered an issue with implementing sorting functionality for each column in both ascending and descending order. Whenever I click on the header to sort a column, an error message saying "Data is not it ...

javascriptreactjsmaterial-ui

Exploring the attributes used in AngularJS directives

I have been exploring AngularJS and noticed that it introduces unique attributes that do not follow the standard HTML attribute format, such as: <html ng-app> or <body ng-controller="PhoneListCtrl"> Where do these ng-* attributes originate ...

htmlangularjs

Is it possible to utilize two nested routes in React Router Dom v6 while using the colon symbol ( : )?

I launched a new react website called My Website Take a look at my website for better understanding In the blog section, I implemented two nested routes <Route path="/blog" element={<Blog />} > <Route path="" e ...

javascriptreactjsreact-routerreact-router-dom

What is the best way to position three DIVs next to each other within another DIV while aligning the last DIV to the right?

I need help formatting a simple list item with three DIVs. The first DIV should be left justified, the second should be able to grow as needed, and the third should be right justified. I currently have them stacked side by side, but can't get the last ...

htmlcssangular

Issue detected: Click event for Backbone not properly registered

Hey there, I'm new to Backbone.js and having some trouble with a login feature. Despite initiating the view, I can't seem to get the click event to fire during an ajax call for logging in. Any ideas on what I might be doing wrong? I've even ...

javascriptjquerybackbone.jsbackbone-viewsbackbone-events

Replacing images on a sticky element using Jquery

https://i.sstatic.net/M3Rx16pB.gif Are you interested in creating unique screen transitions involving a sticky image that changes to a similar version with a different theme color? Can anyone decipher the scroll formula or value used to control the heigh ...

javascriptjquery

Using jquery to refresh several backgrounds at once

While I have some knowledge of CSS and various JavaScript libraries, I've encountered difficulty in integrating multiple backgrounds into the code that I found on this link: http://codepen.io/quasimondo/pen/lDdrF. My goal was to overlay a transparent ...

jqueryhtmlcss

The color of the HTML Input Submit Button is not changing

I'm encountering an issue with changing the color of a submit button in a form. It seems like a straightforward task, but for some reason, my CSS code is not having any effect and I can't figure out why. Here is the CSS code I am using: input[t ...

htmlcss

Parsing JSON object received through AJAX in PHP script

I am facing a challenge with decoding a json object received via an ajax request in a php file and consistently getting null in the console. Here is the JavaScript code: //creating function to send ajax request function ajax_request(){ console.log("hel ...

javascriptphpajaxjson

What is the best way to assess HTML enclosed by <td> tags returned by a method in an Angular application?

I'm facing an issue with a method in my .ts file that is supposed to dynamically generate HTML code for buttons within a td tag. However, when I use <td>{{actions(rec1)}}</td>, instead of getting dynamic buttons, the HTML gets printed as h ...

htmlangularangular8

How to open a new tab and redirect page in ASP.NET when a dropdown list item is selected, using the selected index changed event

I need assistance with redirecting a page in a new tab. I am looking for a solution either through script or c# code. Any help is greatly appreciated. <asp:DropDownList ID="ddlcomplaint" CssClass="list-item-width1" runat="server" AutoPostBack="true ...

c#javascriptasp.net

Incorporating source files from an Express server into an HTML document

Recently, I delved into the world of Node.js with Express and Socket.io to create a web application, specifically a game. In my project, I have a designated /public folder where I aim to serve the necessary files for the client-side operations. Typically, ...

javascriptnode.jsexpressnetwork-programming

What is the point of utilizing angular.extend in this situation?

After inheriting a codebase, I stumbled upon the following code snippet (with some parameters simplified and anonymized): /** * @param {float} num1 * @param {string} str1 * @param {string} str2 * @param {boolean} flag & @return (object) */ sr ...

javascriptangularjs