小百科项目---vue实现前端收藏功能代码（简洁易懂）

onCollection(){if(this.isCollection){//取消收藏let params = {};let f_special_document_id = localStorage.getItem("f_special_document_id");params.f_special_document={f_special_document_id:f_special_document_id,};delSort(params).then(response => {if (response.data.httpStatus === 200) {this.$notify({title: "成功",message: "取消收藏",type: "success",offset: 100});this.key = 0; //使用key值区分两种状态的样式this.isCollection = false; //待收藏状态this.blogData.f_collection_sum -= 1; 收藏数减一            } else {this.$notify.error({title: "错误",message: response.data.message,offset: 100});}});}else{//新增收藏let params = {};let f_special_document_id = localStorage.getItem("f_special_document_id");let f_special_document_name = localStorage.getItem("f_special_document_name");params.f_special_document={f_special_document_id:f_special_document_id,f_special_document_name:f_special_document_name,}addSort(params).then(response => {if (response.data.httpStatus === 200) {this.$notify({title: "成功",message: "收藏成功",type: "success",offset: 100});this.key = 1;this.isCollection = true;this.blogData.f_collection_sum += 1;} else {this.$notify.error({title: "错误",message: response.data.message,offset: 100});}})}
},

3.谨记

只要页面中的代码任一处有逻辑错误或者其他错误时，都会导致收藏样式出现时好时坏的情况，不能只排查实现收藏样式相关代码的错误！！！

之前收藏样式的实现时好时坏，换了各种写法，最后不知道为啥莫名其妙好了，反正暂时没有再出现时好时坏的情况。
今天项目要接近尾声了，在整体测试的时候，发现有的页面收藏样式可用，有的页面需要手动刷新浏览器样式才会更新，f12查看后，发现样式失灵的页面都会报一个错误leghth字段undefined，排查代码后发现只有控制本页面中的评论样式处的代码使用了length字段。

<div class="noComment" v-if="comments.length == 0">还没有评论，快来抢沙发吧！div>

我在data处定义的comments是一个空数组，即comments:[],然后又发现只有没有评论的页面才会出现收藏样式失效的情况，然后我竟然还去百度了空数组求长度的写法，一度陷入自我怀疑状态，最后发现接口返回的comments是null，根本不是空数组！

<div class="noComment" v-if="comments == null">还没有评论，快来抢沙发吧！div>

注意：
一个长度为0的数组我们称之为空数组，空数组是一个真正的对象，只是包含元素个数为0。
null数组是一个空引用。
假设一个方法返回一个数组，如果它返回null，则调用方法必须先判断是否返回null，才能对返回数组进一步处理，而如果返回空数组，则无须null引用检查。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！