VueJS选择DOM中的特定元素

Question

我想知道如何在VueJS中使用或不使用jquery选择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]。

- Kiow

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

- Bill Criswell

Answer 2

如果我正确理解你想要完成的任务，那么我认为你的方法有误。我建议在所有输入框元素上添加一个vue.js事件（focus）：

<input @focus="onFocus" />

接下来，我将为Vue模型上的焦点事件定义onFocus方法/事件处理程序：

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

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

- Marko

---

{btsdaf} - Marko

Answer 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/

- craig_h