jquery - VueJS 选择 dom 中的特定元素

Question

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

Answer 1

您使用这种方法会使事情变得非常脆弱。一个快速的解决方法是像这样处理它。

<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,
    }
  },
},