Get the last div top css in vuejs

Question

I am converting a jQuery code to vuejs. I have a hard time doing it. I tried to search but I can't find anything clear.

Sample jQuery code is to get the last div top position. The code is like this:

var top = parseInt($(".d1 > .d2> div").last().css("top"));

My template code is :

     <template>
        <div class="div1" >
           <div class="div2" ref="busstop">
              <div v-html="renderEl()"></div>
           </div>

           <button @click='test()'>testing</button>
        </div>
    </template>

Any Idea on how to convert in to vuejs? Any help is much appreciated. Thank you.

@QuangPhu Hi. Updated my question and included the html template — Sanv Ariana
– Sanv Ariana, Commented Jan 4, 2021 at 1:53

Quang Phu · Accepted Answer · 2021-01-04 02:35:42Z

3

in ur case, i will using ref to get lastChildElement div by using lastElementChild

First, to get the last child element

this.$refs.busstop.lastElementChild

and to style for this element

this.$refs.busstop.lastElementChild.style.fontSize = "30px";

like that

answered Jan 4, 2021 at 2:35

Quang Phu

3041 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kissu Over a year ago

Damn, never used lastElementChild, good one !

Quang Phu Over a year ago

@kissu what about lastChild

kissu Over a year ago

neither, usually I use CSS for that purpose.

kissu · Accepted Answer · 2021-01-04 02:32:12Z

1

Alright, so if I understand properly, you want to:

have a parent w/ a reference
select the last element of this specific parent
get it's window's position from the top ?

Here is a demo on how to do this in CSS + Vue.
https://codesandbox.io/s/jovial-fog-td190?file=/src/App.vue

answered Jan 4, 2021 at 2:32

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Collectives™ on Stack Overflow

Get the last div top css in vuejs

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related