Uncaught TypeError: Cannot read property 'contains' of null

[benjaken]

When I update vue-strap 1.0.11 to 1.1.16,the console show "Uncaught TypeError: Cannot read property 'contains' of null".

[benjaken]

I found it was wrong in datepicker ready: function ready() { var _this = this; this._blur = function (e) { if (!_this.$el.contains(e.target)) _this.close(); }; this.$dispatch('child-created', this); this.currDate = this.parse(this.value) || this.parse(new Date()); (0, _NodeList2.default)(window).on('click', this._blur); }

[wffranco]

First try to update to the last version. If you still have the same problem, show me how you are using the datepicker.

Good look

[jarrekk]

I have this problem too when I use navbar, in nav.vue,the code is

<template>
<!-- <app></app> -->
<navbar placement="top" type="default">
  <!-- Brand as slot -->
  <a slot="brand" v-link="'/'" title="Home" class="navbar-brand">Vue.js</a>
  <!-- You can use dropdown component -->
  <dropdown text="Dropdown">
    <li><a v-link="'/foo'">Foo</a></li>
    <li><a v-link="'/bar'">Bar</a></li>
  </dropdown>
    <li class="dropdown">
      <a v-link="'/foo'">Foo</a>
    </li>
    <li class="dropdown">
      <a v-link="'/bar'">Bar</a>
    </li>

  <!-- For right positioning use slot -->
  <li slot="right">
    <a v-link="{name: 'login'}">Login</a>
  </li>
</navbar>
</template>
<script>
import { navbar } from 'vue-strap'
import { dropdown } from 'vue-strap'

export default {
  components: {
    navbar, dropdown
  },
  props: ['foo', 'bar']
}
</script>
<style></style>

and the error in console is

[jarrekk]

my vue-strap version is 1.1.18

[jarrekk]

BTW,the error occured with vue-router when I changed view,file nav.vue is a component in every page. Thanks

[smartpierre]

I have the same problem, when I load (f5) a page with a datepicker on it, no problems, but if I go (click on a menu item) to another page that also has a datepicker it will show the same error. It looks like the problem is related with vue-router and how page changes are handled.

[JsonSong89]

ready () { this._blur = (e) => { if (!this.$el.contains(e.target)) this.close() } this.$dispatch('child-created', this) this.currDate = this.parse(this.value) || this.parse(new Date()) $(window).on('click', this._blur) },

when go another page,this.$el will be clean. so it means null.contains(e.target)

[lukpep]

any solutions? Problem still occurs in version 1.1.29

[jarrekk]

@lukpep yes, I have tested this new version.occurs the same.

[gcluo]

beforeDestroy () { $(window).off('click', this._blur) } not remove the click event

[ghostbody]

I got this error too when I am using 'navbar'. And I found the following code:

  ready () {
    let $dropdown = $('.dropdown>[data-toggle="dropdown"]',this.$el).parent()
    $dropdown.on('click', '.dropdown-toggle', (e) => {
      e.preventDefault()
      $dropdown.each((content) => {
        if (content.contains(e.target)) content.classList.toggle('open')
      })
    }).on('click', '.dropdown-menu>li>a', (e) => {
      $dropdown.each((content) => {
        if (content.contains(e.target)) content.classList.remove('open')
      })
    }).onBlur((e) => {
      $dropdown.each((content) => {
        if (!content.contains(e.target)) content.classList.remove('open')
      })
    })
    $(this.$el).on('click touchstart','li:not(.dropdown)>a', e => {
      setTimeout(() => { this.collapsed = true }, 200)
    }).onBlur(e => {
      if (!this.$el.contains(e.target)) { this.collapsed = true }
    })
    let height = this.$el.offsetHeight
    if (this.placement === 'top') {
      document.body.style.paddingTop = height + 'px'
    }
    if (this.placement === 'bottom') {
      document.body.style.paddingBottom = height + 'px'
    }
    if (this.slots.collapse) $('[data-toggle="collapse"]',this.$el).on('click', (e) => this.toggleCollapse(e))
  }

and in

  if (!this.$el.contains(e.target)) { this.collapsed = true }

$el will be null when the router goes to a new view, and the error occurs.