getBoundingClientRect is not a function on vueJs

Question

I would like to find the top and bottom edge of a div when i move my cursor over it. The div is generated dynamically. However, it produced error message

getBoundingClientRect is not a function

<template>
    <div>
        <div v-for="(i, index) in divs" :key="index">
            <div :ref="'ref_' + index" @mouseover="divDragOver($event, index)">
                This is div {{ index }}
            </div>
        </div>        
    </div>
</template>

<script>

export default{
  methods: {
    divDragOver(e, i){
      var divTop = this.$refs["ref_" + i].getBoundingClientRect().top;
      console.log(divTop);
    }
  }
}
</script>

There's no need for dynamic refs. Here's an easy way of getting the top. — tao
– tao, Commented Jun 2, 2020 at 20:15

tony19 · Accepted Answer · 2022-07-15 23:27:25Z

You can use event.target as another user suggested which is, I think, the cleanest way

<template>
  <div>
    <div v-for="(i, index) in divs" :key="index">
      <div ref="myDiv" @mouseover="divDragOver">This is div {{ index }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return { divs: [1, 2, 3, 4] };
  },
  methods: {
    divDragOver(event) {
      console.log(event.target); // this will be your mouseover div
    }
  }
};
</script>

For your issue though, based on Vue.js documentation:

When ref is used together with v-for, the ref you get will be an array containing the child components mirroring the data source.

So you don't have to use the index on your ref creation, while you will end up with divs.length arrays which their first element will be your reference.

If you had to use refs:

<template>
  <div>
    <div v-for="(i, index) in divs" :key="index">
      <div ref="myDiv" @mouseover="divDragOver($event, index)">This is div {{ index }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return { divs: [1, 2, 3, 4] };
  },
  methods: {
    divDragOver(e, i) {
      console.log(this.$refs.myDiv); // this will be an array with all your refs, use i to access
    }
  }
};
</script>

So you were getting an error because your element's ref was on this.$refs["ref_" + i][0]

Gabriel Willemann · Accepted Answer · 2020-06-02 19:55:02Z

1

Try something like that:

<template>
  <div>
    <div v-for="index in divs" :key="index">
      <div :ref="'ref_' + index" @mouseover="divDragOver($event, index)">
        This is div {{ index }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    divs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  }),
  methods: {
    divDragOver(e, i) {
      let [div] = this.$refs['ref_' + i];
      let top = div.getBoundingClientRect().top;
      console.log(top);
    },
  },
};
</script>

Your code doesn't work, because the this.refs return an Array.

edited Jun 2, 2020 at 19:55

answered Jun 2, 2020 at 19:23

Gabriel Willemann

1,9211 gold badge9 silver badges12 bronze badges

2 Comments

educob Over a year ago

Thanks. You solved my problem. But what on Earth "let [div]" is????

Gabriel Willemann Over a year ago

There are two different things here. First let declares a block-scoped local variable. Second [div] is destructuring assignment

Iqbal Pratomo Santoso · Accepted Answer · 2023-05-26 07:39:45Z

1

this works for me, just add $el like this

var divTop = this.$refs["ref_" + i].$el.getBoundingClientRect().top;

answered May 26, 2023 at 7:39

Iqbal Pratomo Santoso

1751 gold badge3 silver badges7 bronze badges

Comments

FloWy · Accepted Answer · 2020-06-02 19:30:30Z

0

You can handle this problem by accessing the target element in the event:

<script>
export default{
  methods: {
    divDragOver(e){
      var divTop = e.target.getBoundingClientRect();
      console.log(divTop);
    }
  }
}
</script>

edited Jun 2, 2020 at 19:30

answered Jun 2, 2020 at 19:23

FloWy

9947 silver badges15 bronze badges

1 Comment

Gabriel Willemann Over a year ago

You are mistaken, the $refs isn't a component. See the documentation: vuejs.org/v2/api/#vm-refs

Collectives™ on Stack Overflow

getBoundingClientRect is not a function on vueJs

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related