VueJS 在 dom 中选择特定元素答案

【问题标题】：VueJS select a specific element in domVueJS 在 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]

【问题讨论】：

标签： jquery vue.js vuejs2

【解决方案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/

【讨论】：