自学Vue踩坑笔记

本文是一些自学Vue时的踩坑记录。

自闭合标签和v-else的坑

<el-form-item label="名字">
  <el-input v-if="isDefaultName" v-model="defaultName" disabled />
  <el-input v-else v-model="name" />
</el-form-item>
<el-checkbox v-model="isDefaultName" label="使用默认名字" />

这里的v-if和v-else看起来是对的，但是实际上会解析报错。像这种自闭合标签<el-input/>的写法，Vue在解析v-else时，就会找不到相邻的上一个v-if，就会解析报错。正确的写法是不要用自闭合标签：

<el-form-item label="名字">
  <el-input v-if="isDefaultName" v-model="defaultName" disabled></el-input>
  <el-input v-else v-model="name"></el-input>
</el-form-item>
<el-checkbox v-model="isDefaultName" label="使用默认名字" />

v-if和v-for同时使用

<div v-if="item.visible" v-for="item in items" :key="item.id">
  {{ item.content }}
</div>

这里v-if和v-for同时使用，Vue会视为v-if在外层，v-for在内层，如下：

if (item.visible) {
  for (const item of items) {
    // ...
  }
}

因此这个item.visible显然会报错。那如果换个顺序，v-for写在前面，v-if写在后面呢？实际上，Vue同样会视为v-if在外层，v-for在内层。

那么想要v-for在外层，正确的写法应该是：

<template v-for="item in items" :key="item.id">
  <div v-if="item.visible">
    {{ item.content }}
  </div>
</template>