我想知道如何在不使用jquery的情况下使用VueJS在DOM中选择特定元素
在我的组件中,我有一个执行此操作的方法函数:
$(".u-loc input").focusin(function() {
$(".u-loc-icon").addClass('blue-active');
});
唯一的问题是它产生的动态性,所以我可以有1或10个不同的值,这意味着我需要为每个选择器都有一个唯一选择器。
所以我添加了
:ref="'u-loc' + index"
这意味着我现在可以使用
$(this.$refs['u-loc' + index]);
定位元素但是我不知道如何链接选择器,使其看起来像这样:
$(this.$refs['u-loc' + index]).('input').focusin(function() {
$(this.$refs['u-loc' + index]).addClass('blue-active');
});
问题是我需要选择元素
[input]
最佳答案
您使用这种方法使事情变得非常脆弱。一个快速的解决方法是像这样处理它。
<div class="input-container">
<input @focusin="addParentClass" @focusout="removeParentClass">
</div>
然后有:
methods: {
addParentClass (event) {
event.target
.closest('.input-container')
.classList.add('blue-active')
},
removeParentClass (event) {
event.target
.closest('.input-container')
.classList.add('blue-active')
},
},
但是,从长远来看,您应该考虑将它们分解为组件。这样,您可以执行以下操作:
<div :class="[containerClasses]">
<input @focusout="isFocused = false" @focusin="isFocused = true">
</div>
然后具有一个计算属性,例如:
computed: {
containerClasses () {
return {
'input-container': true,
'blue-active': this.isFocused,
}
},
},
关于jquery - VueJS在dom中选择特定元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46912632/