时间戳

首页 > 解决方案 > 有没有办法不从 v-for 内的按钮中移除焦点？

javascript - 有没有办法不从 v-for 内的按钮中移除焦点？

问题描述

我有三个按钮，就像页面中的一个选项一样，当用户选择其中一个按钮时，背景颜色会通过 :focus on css 以及当用户单击运行功能并且不会重新加载页面但焦点的提交按钮时更改从所选按钮中删除并且背景颜色变回，尽管单击提交按钮，我如何保持按钮焦点？

<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

解决方案

:focus如果您需要在button不再集中时保留此样式，则您不想设置该状态的样式。selected但是，您可以根据您在 Vue 中的当前状态向按钮添加一个类，并设置它的样式。您可以使用条件类名称（item.marked是状态中的选定值，不确定您目前使用的是什么）：

<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>

如果它是某种只能标记一个答案的测验形式，那么使用单选按钮 ( <input type="radio" />) 可能会更好。您还可以label按照您想要的任何方式设置它们（或更类似于它们）的样式。

推荐阅读