代码遇到问题,学会一步一步调试,排查问题,最简单的就是打印输出console.log(你想要打印的内容);多问自己几个问题,思路就出来了,或许难倒你的不是逻辑思维能力差,而是你能不能静下心去问自己遇到了什么问题。
我挣扎了差不多一个星期,要做的功能就是为项目添加一个“收藏功能”,即点击心形变颜色。
第一个思路是:
<v-btn flat icon @click="favoriteEgg(item.id)" v-if="currentEggId = item.id">
<v-icon small>favorite</v-icon>
</v-btn>
当前点击图标的id是否与原本存在的id相等,则图标变红。失败告终
第二个思路是:
新建一个空数组用于测试,增加“添加id到数组”函数和“删除数组中的id”函数,
点击图标,触发点击事件,若id存在于数组中,则执行删除id操作,若不存在,就执行添加id操作
函数我也写了两个,后面发现可以合二为一。需要说明的是,添加删除函数以及数组,都定义存放在了Vuex中
,所以,设置函数的时候,需要外面传入的值为item.id
,我在点击事件传值时,已经用val形参代替了。合二为一的函数操作如下:
import Vuex from 'vuex'
Vue.use(Vuex) //引入vuex
const store = new Vuex.Store({
collectionId: []; //声明数组存放收藏的id
}
CollectionId(state,val){
for(let i = 0; i < state.collectionId