Cannot read property 'offsetWidth' of undefined
ncaught TypeError: Cannot read property "offsetWidth" of undefined encountered an error var navWidth = this.$refs.nav.offsetWidth; while using the iview form
console error: Uncaught TypeError: Cannot read property "offsetWidth" of undefined
at VueComponent.updateNavScroll (iview.js?7687:24282)
sources:
updateNavScroll: function updateNavScroll () {
var navWidth = this.$refs.nav.offsetWidth;
var containerWidth = this.$refs.navScroll.offsetWidth;
var currentOffset = this.getCurrentScrollOffset();
if (containerWidth < navWidth) {
this.scrollable = true;
if (navWidth - currentOffset < containerWidth) {
this.setOffset(navWidth - containerWidth);
}
} else {
this.scrollable = false;
if (currentOffset > 0) {
this.setOffset(0);
}
}
},-sharp-sharp-sharp
sources of topics and their own ideas
related codes
/ / Please paste the code text below (do not replace the code with pictures)
what result do you expect? What is the error message actually seen?
check this.$refs.navScroll , this may not be a dom, or this value undefined
I have the same problem. Has the owner solved
?
my project has also appeared, write about my solution
antecedent: project iview ui single-page application, the page does tab tab routing (that is, a tab is nested in the parent route, and the child route is written below to change the route for tab). The big idea of the product is that when each tabpanel has permission control, there will be no tabpanel when there is empty permission
.
This is where the
problem arises. Without a single panel in tab, there is an error
.
Cannot read property 'offsetWidth' of undefined
tabiview tab
https://github.com/view-design/ViewUI/blob/master/src/components/tabs/tabs.vue
The nav in
is the label for the horizontal scrolling of the component
and the reason why I reported the error happens to be that this user does not have a permission.
but according to the code, if it is not refs in computed, it should not report an error, because all the tags on nav do not have the judgment of v-if.
mounted () {
this.showSlot = this.$slots.extra !== undefined;
this.observer = elementResizeDetectorMaker();
this.observer.listenTo(this.$refs.navWrap, this.handleResize);
the only thing that can explain is that there is no delay in the rendering time of mounted's 50ms, so you can't find it. But when you have panel, you won't make an error, so you can't explain it. You still don't understand
yet.
< H2 > solve < / H2 >
if there is no permission, v-if determines to hide the perfect solution
