[英]Nuxt Error : Cannot read properties of null (reading 'addEventListener') default.vue and index.vue not rendering
I'm using nuxt.js
and vuesax
as an UI framework, I did modify my default.vue
in /layouts
with a basic navbar template exemple from vuesax
.我使用
nuxt.js
和vuesax
作为 UI 框架,我确实使用 vuesax 中的基本导航栏模板vuesax
在/layouts
中修改了我的default.vue
。
Then I used @nuxtjs/router-extras
to rename my "/"
and redirect it to /login
, I also used a vuesax
input type template in my index.vue
to see if I could render my /login
page (navbar + input) but it is showing be this error:然后我使用
@nuxtjs/router-extras
重命名我的"/"
并将其重定向到/login
,我还在我的index.vue
中使用了一个vuesax
输入类型模板来查看我是否可以渲染我的/login
页面(导航栏 + 输入)但它显示是这个错误:
client.js?06a0:103 TypeError: Cannot read properties of null (reading 'addEventListener')
at VueComponent.handleScroll (vuesax.js?574d:24324:1)
at VueComponent.mounted (vuesax.js?574d:24382:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
at callHook (vue.runtime.esm.js?2b0e:4235:1)
at Object.insert (vue.runtime.esm.js?2b0e:3158:1)
at invokeInsertHook (vue.runtime.esm.js?2b0e:6390:1)
at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6609:1)
at Vue._update (vue.runtime.esm.js?2b0e:3960:1)
at Vue.updateComponent (vue.runtime.esm.js?2b0e:4075:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4495:1)
again I'm very new , heres some code:再次我很新,继承人一些代码:
default.vue
<template>
<div class="center examplex">
<vs-navbar target-scroll="#padding-scroll-content" padding-scroll center-collapsed v-model="active">
<template #left>
<img src="" alt="">
</template>
<vs-navbar-item :active="active === 'wallet'" id="wallet">
Wallet
</vs-navbar-item>
<vs-navbar-item :active="active === 'profil'" id="profil">
Profil
</vs-navbar-item>
<template #right>
<vs-button>Login</vs-button>
</template>
</vs-navbar>
<Nuxt />
</div>
</template>
<script>
import Vue from 'vue'
import Vuesax from 'vuesax'
import 'vuesax/dist/vuesax.css' //Vuesax styles
Vue.use(Vuesax, {
// options here
})
export default {
name: 'DefaultLayout',
data:() => ({
active: 'wallet'
})
}
</script>
index.vue
<template>
<div class="center content-inputs">
hello
<vs-input
type="password"
v-model="value"
label-placeholder="Password"
:progress="getProgress"
:visiblePassword="hasVisiblePassword"
icon-after
click-icon="hasVisiblePassword = !hasVisiblePassword">
<template #icon>
<i v-if="!hasVisiblePassword" class='bx bx-show-alt'></i>
<i v-else class='bx bx-hide'></i>
</template>
<template v-if="getProgress >= 100" #message-success>
Secure password
</template>
</vs-input>
</div>
</template>
<router>
{
"path": "/login"
}
</router>
<script>
import Vue from 'vue'
import Vuesax from 'vuesax'
import 'vuesax/dist/vuesax.css' //Vuesax styles
Vue.use(Vuesax, {
// options here
})
export default {
data:() => ({
layout: 'default',
value: '',
hasVisiblePassword: false
}),
computed: {
getProgress() {
let progress = 0
// at least one number
if (/\d/.test(this.value)) {
progress += 20
}
// at least one capital letter
if (/(.*[A-Z].*)/.test(this.value)) {
progress += 20
}
// at menons a lowercase
if (/(.*[a-z].*)/.test(this.value)) {
progress += 20
}
// more than 5 digits
if (this.value.length >= 6) {
progress += 20
}
// at least one special character
if (/[^A-Za-z0-9]/.test(this.value)) {
progress += 20
}
return progress
}
}
}
</script>
middleware/redirect.js
export default function(req, res, next) {
const redirects = [
{
from: "/",
to: "/login"
}
]
const redirect = redirects.find((r) => r.from === req.url)
if (redirect) {
res.writeHead(301, { Location: redirect.to })
res.end()
} else {
next()
}
}
Vuesax is not really maintained anymore , latest commit being from 20th September 2020. Vuesax 不再真正维护,最新提交是从 2020 年 9 月 20 日开始。
Hence why it's not part of the Nuxt CLI anymore.因此它不再是Nuxt CLI的一部分。
If you're new, I recommend starting by using something more simple, well supported and maintained like Vuetify, Buefy, Tailwind or at least any other one available in the list.如果您是新手,我建议您从使用更简单、更受支持和维护的东西开始,例如 Vuetify、Buefy、Tailwind 或至少列表中的任何其他可用的东西。
Even starting directly with Nuxt without any prior Vue knowledge is quite risky.即使在没有任何 Vue 知识的情况下直接使用 Nuxt 也是非常冒险的。
Back to the topic, even if we fix the issues regarding a specific install issue here, we will probably face some others down the road.回到主题,即使我们在这里解决了与特定安装问题有关的问题,我们也可能会遇到其他一些问题。 And since the project is not maintained anymore, it's pretty sure that at some point we will see a blocker of some sort.
而且由于该项目不再维护,因此很确定在某些时候我们会看到某种阻止程序。
Don't expect Vuesax to work with the new Nuxt3 at all for example.例如,不要指望 Vuesax 可以与新的 Nuxt3 一起使用。 So yeah, sorry it's not an answer to your question but I feel like it's better if I tell you that now that later (after days of debugging).
所以,是的,对不起,这不是你问题的答案,但我觉得如果我现在告诉你那会更好(经过几天的调试)。
PS: you're trying to use res.writeHead
in a client-side middleware ( redirect.js
). PS:您正在尝试在客户端中间件(
redirect.js
)中使用res.writeHead
。 If you want a redirect, you'll need to use more of a $router.push
here to use the Vue router .如果你想要一个重定向,你需要在这里使用更多的
$router.push
来使用Vue 路由器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.