Question

我想知道如何使用VueJS在没有jquery的情况下选择DOM中的特定元素

在我的组件中，我有一个方法函数来执行此操作：

$(".u-loc input").focusin(function() {
    $(".u-loc-icon").addClass('blue-active');
});

唯一的问题是它生成的动态，所以我可以有1或10个不同的意思，这意味着我需要为每个选择器提供一个uniqe选择器。

所以我添加了: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,
    }
  },
},

Answer 2

记住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标志设置为{{{ 1}}和true e分别用于给定的输入（为了演示目的，我已经以非常冗长的方式完成了这一点），然后我使用了Vue＆＃39; s class binding根据该标志添加和删除fals类。

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

Answer 3

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

<input @focus="onFocus" />

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

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

正如您所看到的，您现在可以通过此方式访问事件envoking元素。$ el。此外，您可以通过此获取任何子元素。$ el.childNodes。

VueJS在dom中选择一个特定元素

3 个答案: