我想知道如何在不使用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/

10-09 15:11
查看更多