Question

我在Vue模板中有一个表格，用于查看和保存帐户数据。我希望在每个字段都有焦点时显示一个保存按钮元素。我可以通过以下方式实现这一目标：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
<table class="accounttable" ref="my_tableinfo">
<tr><td class="values">
<input type="text" v-model="accountitems5" @blur="saveData(accountitems5),sbutton5 = false" @focus="sbutton5 = true"/><button v-if="sbutton5">save</button>
</td><td></td></tr>
<tr><td class="values">
<input type="text" v-model="accountitems6" @blur="saveData(accountitems6),sbutton6 = false" @focus="sbutton6 = true"/><button v-if="sbutton6">save</button>
</td><td></td></tr>
</table>
</div>

hasFocus()

但我想知道是否有一种更简单，更简单的方法，只需引用兄弟和检查焦点，而不是必须给每个保存按钮一个唯一的值？我尝试了各种形式的:focus-within，但无法让它们起作用。

注意：我正在寻找一种涉及较少编码的解决方案。例如，在这种情况下，需要更多代码的解决方案在这种情况下并不是更好的。

更新感谢@billy，我能够使用{{1}}伪选择器使用css。但后来我才意识到目前这种浏览器支持得太少了，所以我需要另一种解决方案，或者我会回归到每种解决方案的唯一值。

Answer 1

我不熟悉Vue，但你可以用CSS做这件事。

请参阅 How do I modify properties of siblings with CSS selecters like :focus?

兄弟姐妹有焦点的显示元素

1 个答案: