javascript
2 minutes read (About 332 words)

vue常见错误

■ 渲染state中定义image

template

1
<img class="user-avatar rounded-circle mr-2" :src="avatar" alt="User Avatar" />

script

1
const defaultAvatar = require('@/assets/images/avatars/0.jpg');

import的方式可能会有错误提示，require的方式相当于import * as defaultAvatar

■ 循环渲染state中定义数组

和组件内的静态属性不同，state中属性循环需要制定:key,保证列表项目的唯一性，做渲染优化

1
2
3
4
5
6
7
8
9
10
11
<d-dropdown-item v-for="item in notifications.list" v-bind:key="item">
  <div class="notification__icon-wrapper">
    <div class="notification__icon" v-if="item.icon">
      <i class="material-icons" v-html="item.icon" />
    </div>
  </div>
  <div class="notification__content">
    <span class="notification__category">{{ item.title }}</span>
    <p>{{ item.text }}</p>
  </div>
</d-dropdown-item>

■ Parameter ‘to’ implicitly has an ‘any’ type.

typescript进行结构时需要声明结构对象类型，为了便捷，通常使用any
对于类型强迫症可以找到精准定义来声明

1
2
3
4
5
6
const actions = {
  toggleSidebar({ commit, state: { sidebar } }: any) {
    const { visible } = sidebar;
    commit('toggleSidebar', !visible);
  }
};

■ vue router Navigating to current location (“/login”) is not allowed

这个错误表示当前已经在这个路由，所以无法再进行push

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Component({
  name: 'app'
})
export default class App extends Vue {
  @State(states => states.user.islogin)
  islogin;

  // 这里做一次判断，避免重复push
  created() {
    if (!this.islogin && this.$router.history.current.name !== 'login') {
      this.$router.push({ path: '/login' });
    }
  }

  get layout() {
    return `default-${this.islogin ? 'layout' : 'blank'}`;
  }
}

■ Property ‘history’ does not exist on type ‘VueRouter’.

  1. by adding // @ts-ignore to the line above
  2. else…
1
2
3
4
const router: any = this.$router;
    if (!this.islogin && router.history.current.name !== 'login') {
      router.push({ path: '/login' });
    }

■ Cannot find module ‘’ with typescript

1
2
> 11 | import Loading from '~components/common/loading';
     |                     ^

解决方案

1
import Loading from '~components/common/loading.vue';
# ,

Like this article? Support the author with

vue typescript书写规则
白色海芋花 の水彩绘制过程～

Comments

Categories

Tag Cloud

DASH FFMpeg WebGl WebRTC angular antd docker echartsjs ffmpeg flex git go google immutable keep update koa mac mongodb next.js nginx node nodejs npm nuxt.js nuxtjs pm2 postgres postgresql rabbitmq react redux regexp typescript vim vue vuejs 日语 水彩

Recent

Archives

Tags

DASH 1
FFMpeg 1
WebGl 9
WebRTC 4
angular 3
antd 1
docker 3
echartsjs 3
ffmpeg 1
flex 1
git 7
go 1
google 1
immutable 1
keep update 1
koa 1
mac 1
mongodb 1
next.js 1
nginx 2
node 5
nodejs 3
npm 3
nuxt.js 1
nuxtjs 1
pm2 1
postgres 1
postgresql 1
rabbitmq 1
react 6
redux 1
regexp 2
typescript 8
vim 3
vue 13
vuejs 1
日语 1
水彩 7

Recent

Archives

Tags

DASH 1
FFMpeg 1
WebGl 9
WebRTC 4
angular 3
antd 1
docker 3
echartsjs 3
ffmpeg 1
flex 1
git 7
go 1
google 1
immutable 1
keep update 1
koa 1
mac 1
mongodb 1
next.js 1
nginx 2
node 5
nodejs 3
npm 3
nuxt.js 1
nuxtjs 1
pm2 1
postgres 1
postgresql 1
rabbitmq 1
react 6
redux 1
regexp 2
typescript 8
vim 3
vue 13
vuejs 1
日语 1
水彩 7
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×