Vue.js 通过函数访问元素答案

【问题标题】：Vue.js accessing element via functionVue.js 通过函数访问元素
【发布时间】：2020-05-25 13:21:45
【问题描述】：

当我关注标签下方的输入元素时，我需要向标签元素添加类。我目前的解决方案是这样的：

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 为中心的类。如何选择最近的标签元素并编辑它的类？

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

更好的方法是使用动态类。看这个例子：

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>

【讨论】：

每个标签都有一个变量不是一个坏习惯吗？我的组件上有许多标签和输入，因此每个标签都需要一个变量。
不一定。它可能会使您的代码无法维护。如果您有许多表单元素，您可以使用一个组件，然后在它上面迭代您的表单数据。该组件将有一个焦点变量。我会更新我的答案。

【解决方案2】：

您可以将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>

【讨论】：