Vue.js 通過 function 訪問元素

Question

當我關注低於 label 的輸入元素時，我需要將 class 添加到 label 元素。 我目前的解決方案是這樣的：

HTML：

<label for="formProductId" ref="productIdLabel" class="form-element-title">Product ID</label>
<input id="formProductId" @blur="toggleFocus('productIdLabel', false)" @focus="toggleFocus('productIdLabel', true)" v-model="filterValues.productId" :name="filterOptions.productId === true ? 'productId' : false" type="text">

JS：

toggleFocus(ref: string, enable: boolean) {
    if (enable) {
        (this.$refs[ref] as HTMLElement).classList.add("js-focused");
    } else {
        (this.$refs[ref] as HTMLElement).classList.remove("js-focused");
    }
}

我想刪除 ref 屬性並完全由所選元素本身切換以 js 為中心的 class 。 我如何 select 最接近的 label 元素並編輯它的 class？

Answer 1

您可以將previousElementSibling與event.target一起使用。

例子：

 new Vue({ el: '#app', methods: { toggleLabelColor(event) { event.target.previousElementSibling.classList.toggle('input-focused') } } })

 input { display: block; }.input-focused { color: green; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <label>I turn green when focused.</label> <input @focus="toggleLabelColor" @blur="toggleLabelColor"> <label>I turn green when focused.</label> <input @focus="toggleLabelColor" @blur="toggleLabelColor"> <label>I turn green when focused.</label> <input @focus="toggleLabelColor" @blur="toggleLabelColor"> </div>

Answer 2

更好的方法是使用動態 class。 看這個例子：

 new Vue({ el: '#app', data: { productIdLabel: false } })

 .js-focused { background-color: lightblue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id='app'> <label for="formProductId" class="form-element-title":class="{'js-focused': productIdLabel == true}">Product ID</label> <input id="formProductId" @blur="productIdLabel = false" @focus="productIdLabel = true" type="text"> </div>

與組件和多個表單輸入一起使用：

 Vue.component("form-label", { template: `<div> <label:for="info.id" class="form-element-title":class="{'js-focused': isFocused == true}">{{info.label}}</label> <input:id="info.id" @blur="isFocused = false" @focus="isFocused = true" type="text"> </div>`, props: ["info"], data: function(){ return { isFocused: false } } }) new Vue({ el: '#app', data: { form: [{ label: "Product Id", id: "formProductId" }, { label: "Another Element", id: "anoterId" }, { label: "Third Element", id: "thirdId" }] } })

 .js-focused { background-color: lightblue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id='app'> <form-label v-for='el in form':info='el'></form-label> </div>