vuejs爬坑小能手

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1. 写vue时，这种外部引入css后面的分号必须加

<style scoped>
  @import "./assets/css/base.css";
</style>

---

2. vue报错-Object(…) is not a function

这个问题可以从这几个方面入手

导入导出，检查各个js文件或者vue文件的import和export中的路径是否正确
函数名是否正确，比如在一个文件中你写的是getHome,另一个文件可能写成了gethome
请求的接口是否正确

---

3. vscode编写vue项目时报错

这是在使用v-for时出现的问题
解决办法：增加key值

加入这句即可，注意key的值不能是一个对象，应该是一个字符串

---

5. 期望值不一样

这里是说期望得到一个数组，但却得到一个对象
看看源码

HomeSwiper与Home建立通信，把bannes传过去
查看数据信息发现

banners是一个对象，我希望获取的是banners.list，所以只需要将Home.vue 中引用:banners="banners"改为:banners=“banners.list”

因为接口不是自己做的，所以在引用数据之类的东西还是得对数据的信息了解一下，不然很容易出现各种大大小小的问题

---

5. vscode编辑器报错

其实就是vue中的v-for和v-if在同一个标签中使用

<div v-for="(item, index) in goods.services" :key="index" v-if="itemShow(item)">
	<img :src="item.icon" alt />
	<span>{{ item.name }}</span>
</div>

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

解决办法：

<template v-for="(item, index) in goods.services">
  <div :key="index" v-if="itemShow(item)">
    <img :src="item.icon" alt />
    <span>{{ item.name }}</span>
  </div>
</template>

使用h5的新标签"template",没有特殊含义，也不会影响v-for和v-if的功能实现

---