顯示元素，如果兄弟有焦點

-1

我有一個Vue模板中的表格用於查看和保存帳戶數據。我想在聚焦時在每個字段旁邊顯示保存按鈕元素。我可以通過以下方式實現這一目標：顯示元素，如果兄弟有焦點

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     accountitems5: 'some value for 5', 
 
     accountitems6: 'value for six', 
 
     sbutton5: false, 
 
     sbutton6: false 
 
    } 
 
    }, 
 
    methods: { 
 
    saveData (inputval) { 
 
     // save function runs here 
 
    } 
 
    } 
 
})

<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()，但無法讓他們工作。

注：我正在尋找一種解決方案，涉及較少的編碼。例如，在這種情況下，需要更多代碼的解決方案在這種情況下並不會更好。

UPDATE 感謝@billy，我能得到它與CSS使用:focus-within僞選擇工作。但後來我意識到，目前在很少的瀏覽器中支持這種方式，所以我需要另一種解決方案，或者爲每個解決方案迴歸獨特的價值。

來源

2017-10-14 Stephen

可以使這個現場演示？ – C2486

我不確定我的理解。爲什麼？上面的代碼工作正常，我只是問，是否有另一種更簡單的方法來解決這個問題，通過確定兄弟姐妹什麼時候有焦點。 – Stephen

很容易給你解決你的樣品數據 – C2486

我不熟悉Vue，但你可以用CSS做這個嗎？

見 How do I modify properties of siblings with CSS selecters like :focus?

來源

2017-10-14 12:46:05 Billy

感謝這在理論上是一個好主意，但我的輸入實際上是包裝輸入和按鈕元素的組件，所以我認爲它不會起作用。（因爲相鄰的兄弟姐妹必須立即關注。）https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors。） – Stephen

WAIT。我把它收回。我終究可以使用css，但使用僞類'：focus-within'！謝謝！ – Stephen

UGH，對不起，我再次收回。雖然這在技術上是可行的，但我沒有廣泛支持，因此無法使用它。 :( – Stephen

顯示元素，如果兄弟有焦點

回答

相關問題