Nuxt Error : Cannot read properties of null (reading 'addEventListener') default.vue and index.vue not rendering

Question

我正在使用 nuxt.js 和 vuesax 作为 UI 框架，我在修改我的 default.vue /layouts 带有来自 vuesax.
的基本导航栏模板示例然后我用@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)

再次我是新手，这里是一些代码：

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()
  }
}

Answer 1

Vuesax is not really maintained anymore，最新提交时间为 2020 年 9 月 20 日。

因此它不再是的一部分。

如果您是新手，我建议您从使用更简单、支持和维护良好的工具开始，例如 Vuetify、Buefy、Tailwind 或至少列表中的任何其他可用工具。

即使在没有任何 Vue 知识的情况下直接开始使用 Nuxt 也是相当冒险的。

回到主题，即使我们在这里解决了有关特定安装问题的问题，我们也可能会遇到其他问题。由于该项目不再维护，所以很确定在某个时候我们会看到某种阻碍。

例如，不要指望 Vuesax 可以与新的 Nuxt3 一起工作。所以，是的，抱歉，这不是您问题的答案，但我觉得最好现在再告诉您（经过几天的调试）。

PS：您正在尝试在 client-side 中间件 (redirect.js) 中使用 res.writeHead。如果你想要重定向，你需要在这里使用更多的 $router.push 来使用 Vue router.

Nuxt Error : Cannot read properties of null (reading 'addEventListener') default.vue and index.vue not rendering

Nuxt Error : Cannot read properties of null (reading 'addEventListener') default.vue and index.vue not rendering

javascript

typescript

vue.js

nuxt.js

vuesax