问题

在同一个标签上使用 v-for 和 v-if 编辑器会提示如下报错:

The 'menu' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.eslint-plugin-vue

原因

原因：v-for的优先级会高于 v-if，因此 v-if 会重复运行在每个 v-for 中。Vue官网说明

解决

1. 将 v-if 和 v-for 分别放在不同标签中
2. 使用 template标签包裹即可，v-for 写在 template 上，v-if 绑定在需要循环的元素之上即可!

修改前:

          <div
            class="col-md-6 col-lg-4"
            v-for="item in dataList"
            :key="item.carNum"
            v-if="item.borrowCarUser"
          >
            <div class="card card-hover hover-shadow">
              <div class="card-body text-center">
                <h3 class="m-0 mb-1">{{ item.carNum }}</h3>
                <div class="mb-3">
                  <span class="badge bg-azure">{{ item.carBrand }}</span>
                  <span class="badge bg-azure">{{ item.carSeries }}</span>
                  <span class="badge bg-azure">{{ item.carSeatNum }}人座</span>
                  <span class="badge bg-azure">{{ item.carColor }}</span>
                </div>
              </div>
              </div>
            </div>
          </div>

修改后:

          <template v-for="item in dataList">
            <div
              class="col-md-6 col-lg-4"
              :key="item.carNum"
              v-if="item.borrowCarUser"
            >
              <div class="card card-hover hover-shadow">
                <div class="card-body text-center">
                  <h3 class="m-0 mb-1">{{ item.carNum }}</h3>
                  <div class="mb-3">
                    <span class="badge bg-azure">{{ item.carBrand }}</span>
                    <span class="badge bg-azure">{{ item.carSeries }}</span>
                    <span class="badge bg-azure"
                      >{{ item.carSeatNum }}人座</span
                    >
                    <span class="badge bg-azure">{{ item.carColor }}</span>
                  </div>
              </div>
            </div>
          </template>