VueJS는 돔에서 특정 요소 선택

VueJS는 돔에서 특정 요소 선택

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]

이런 접근법으로 일을 아주 연약하게 만들고 있다.너에게 빠른 해결책은 이렇게 처리하는 것이다.

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

만약 내가 네가 무엇을 이루려고 하는지 정확히 이해한다면, 나는 네가 그것에 대해 잘못 생각하고 있다고 생각해.모든 입력 요소에 vue.js 이벤트(초점)를 추가하겠다.

<input @focus="onFocus" />

그런 다음 내 Vue 모델에서 포커스 이벤트에 대한 onFocus 메서드/이벤트 핸들러를 정의한다.

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

보시다시피 이제 이를 통해 이벤트 구성 요소에 도달할 수 있다.게다가 당신은 이것을 통해 어떤 아동 요소에도 도달할 수 있다.$el.childNodes.

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 각각 주어진 입력에 대해(시연 목적을 위해 꽤 장황하게 그렇게 했다) 나는 그때 부에의 클래스 바인딩을 사용하여 부에를 추가하고 제거한다.blue-active그 깃발을 기준으로 한 수업

그리고 여기 최종 결과가 있다: https://jsfiddle.net/mooxo19v/

참조URL: https://stackoverflow.com/questions/46912632/vuejs-select-a-specific-element-in-dom