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

如果我正确理解你想要完成的任务，那么我认为你错了。我将向所有输入元素添加一个 vue.js 事件（焦点）：

<input @focus="onFocus" />

然后我会为 Vue 模型上的焦点事件定义 onFocus 方法/事件处理程序：

methods: {
   onFocus: function (e) {
      var element = this.$el;
      var children = this.$el.childNodes;
   }
}

正如您所看到的，您现在可以通过 this.$el 访问事件调用元素。此外，您可以通过 this.$el.childNodes 访问任何子元素。