waypoint Uncaught TypeError: Cannot read property

Question

I am using waypoint and it send me this message:

Uncaught TypeError: Cannot read property 'each' of undefined

this is how I got the code with vue.js + rails:

<template>
      <div id="playerContainer final">
         <iframe src="xxxxxxxxx" allowfullscreen></iframe> 
       </div>
</template>

<script>
  require('waypoints/lib/jquery.waypoints.min.js')
  export default {
    mounted(){
      var ele
      new Waypoint({
        element: ele = document.getElementById('final'),
        handler: function(direction) {
          if (direction == 'down') {
            $(ele).addClass('muestra')
          } else {
            $(ele).removeClass('muestra')
          }
          console.log(direction);
        }
      });
    }
  }
<script>

I will really appreciate guys if you ca help me with this issue.

Answer 1

I found that div cannot contain multiple ids. You can get it work if you specify whole id in getElementById.

ele = document.getElementById('playerContainer final')

Can a DOM element have an ID that contains a space?