JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <button @click="getPositions">Position</button>
  <div id="scrollable-outer">
    <div id="scrollable-inner">
      <div v-for="message in messages" class="message">{{message}}</div>
    </div>
  </div>
  <div id="position-outer">
    <div id="position-inner">
      {{positions}}
    </div>
  </div>
</div>

CSS

#scrollable-outer {
  width: 200px;
  height: 100px;
  overflow-y: auto;
  display: inline-block;
  border: 1px solid black;
}

JavaScript

var data = []
for (var i = 0; i < 20; i++) {
	data.push('hello - ' + (i+1))
}
new Vue({
	el: '#app',
  data: function () {
  	return {
    	messages: data,
      positions: []
    }
  },
  computed: {
  	positions: function () {
    	
      var positions = this.$el.querySelectorAll('.message')
    	this.$nextTick(function () {
      	positions = vm.$el.querySelectorAll('.message')
        console.log(positions.length);
        return positions
      })
    }
	},
  methods: {
  	getPositions: function () {
      var positions = this.$el.querySelectorAll('.message')
      this.positions = positions.length;
    }
  }
})