VueJS 在 dom 中选择特定元素

Posted 2023-02-22

【中文标题】VueJS 在 dom 中选择特定元素

【英文标题】：VueJS select a specific element in dom

【发布时间】：2018-04-05 09:00:31

【问题描述】：

我想知道如何在没有 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]

【参考方案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,
    
  ,
,

【参考方案2】：

如果我正确理解您要完成的工作，那么我认为您做错了。我会为所有输入元素添加一个 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 访问任何子元素。

【讨论】：

@Bert 我很确定在使用组件时“this”总是指组件的最外部元素。由于问题与组件无关，那么您是正确的，但是正如有人已经指出的那样，我的答案很容易通过使用 e.target 来解决。

【参考方案3】：

记住 Vue 是数据驱动的，因此视图应该反映底层数据模型。一般来说，除非你有特定的理由，否则你不应该向 DOM 中注入任何东西。在您的情况下，您希望通过添加一个类来突出显示焦点输入，因此，我们可以有一个具有 active 属性的输入对象数组：

new Vue(
  el: '#app',
  methods:
    setActive(index)
        this.inputs[index].active = true;
    ,
    removeActive(index)
        this.inputs[index].active = false;
    
  ,
  data: 
    inputs: [
        value: 'foo', active: false,
        value: 'bar', active: false
    ]
  
)

现在您可以在模板中使用v-for 打印所有输入：

  <div v-for="(input, index) in inputs">
    <input v-model="input.value" @focusin="setActive(index)" @focusout="removeActive(index)" :class="'blue-active' : input.active"/> 
  </div>

您可能会注意到，我将事件侦听器直接附加到每个输入（@focusin 和 @focusout），它调用一个方法，将 active 标志分别设置为 true 和 false给定的输入（出于演示目的，我以非常冗长的方式完成了该操作），然后我使用 Vue 的 class binding 基于该标志添加和删除 blue-active 类。

这是最终结果：https://jsfiddle.net/mooxo19v/