VueJs - $ref에서 요소의 DOM 속성에 액세스하는 방법

VueJs - $ref에서 요소의 DOM 속성에 액세스하는 방법

나는 요소가 있다.

<tbody ref="tbody">
  <tr class="row" :ref="userIndex" v-for="(userData, uid, userIndex) in users" :key="uid">

내 템플릿에.스크롤탑, 수직오프셋과 같은 DOM 속성에 액세스/편집해야 하는 경우<tr>원소의어떻게 하면 이것을 이룰 수 있을까?

다음을 사용하여 액세스하려고 시도했다.this.$refs[userIndex][0].$el하지만 작동하지 않는다.콘솔에 있는 모든 속성을 볼 수 있지만 액세스할 수 없음.그러나this.$refs.tbody.scrollTop작동하다

아래는 스냅 쇼 입니다.console.log(this.$refs)

console.log(this.$refs[userIndex])

console.log(this.$refs[userIndex][0])

내가 사용했을 때 보시다시피this.$refs[userIndex][0]DOM 속성이 보이지 않는 경우

A $ref사물은 오직 a만을 가질 것이다.$elVue 구성 요소인 경우 속성.a를 추가하면ref일반적 요소에 귀속하다.$ref해당 DOM 요소에 대한 참조가 될 수 있다.

단순참조항this.$refs[userIndex][0]대신에this.$refs[userIndex][0].$el.

콘솔에서 해당 요소의 속성을 보려면console.dir대신에console.log이 게시물을 보십시오.

그러나 다른 개체와 마찬가지로 요소의 속성에 액세스할 수 있다.그래서, 당신은 그 정보를 기록할 수 있었다.scrollTop예를 들어, 다음을 통해console.log(this.$refs[userIndex][0].scrollTop).

난 그렇게 생각하지 않는다.verticalOffset존재한다 offsetTopdo. Dom 요소와 그 속성을 콘솔에 기록하려면console.dir

브라우저 콘솔을 열고 다음 작업 코드 조각 실행:

var app = new Vue({
  el: '#app',
  data: {
    users: {
      first: {
        name: "Louise"
      },
      second: {
        name: "Michelle"
      }
    }
  },
  mounted() {
    console.dir(this.$refs[1][0])
    console.log('property: ', this.$refs[1][0].offsetTop)
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<table><tbody ref="tbody">
  <tr :ref="userIndex" v-for="(userData, uid, userIndex) in users" :key="uid">
  <td>{{userData}}: {{userIndex}}</td>
  </tr>
</tbody>
</table>
</div>

참조URL: https://stackoverflow.com/questions/45594389/vuejs-how-to-access-dom-property-of-an-element-from-refs