vue实现查询功能
vue个人博客-解决对本地数据查询时出现删除编辑出错的问题博客展示主要代码实现查询时博客展示内容刷新出现问题解决方法博客展示主要代码博客展示:<div class="showBlog"><h1>Blog post</h1><!-- 搜索框 --><input type="text" v-model="search" placeholder="搜
·
vue个人博客-解决对本地数据查询时出现删除编辑出错的问题
博客展示页主要代码
博客展示:
<div class="showBlog">
<h1>Blog post</h1>
<!-- 搜索框 -->
<input type="text" v-model="search" placeholder="搜索blog标题" v-if="flag" class="search">
<input type="text" v-model="search" placeholder="搜索blog内容" v-if="!flag" class="search">
<!-- 切换搜索模式 -->
<button @click="searchMode" class="searchMode"></button>
<!-- 博客遍历展示区域 -->
<div v-for="(item,index) in searchResults" :key="index" class="blog">
<img src="../assets/3.png" alt="">
<h2>{{item.articleTitle}}</h2>
<div class="content">{{item.content}}</div>
<button @click="remove(index)" class="delete"></button>
</div>
</div>
删除功能:
<button @click="remove(index)" class="delete"></button>
// 删除博客
remove(index) {
if(window.confirm('确定删除该博客吗?')) {
this.$store.state.data.splice(index,1);
}
存储数据来源于vuex,如下:
import { createStore } from 'vuex'
export default createStore({
state: {
data:[{
articleTitle:'房间 Room (2015)',
content:'在房间里你是我的全世界,走出房间也不会害怕,因为我们依然在一起…这句话是孩子说的,但同样适用于母亲,甚至可以说其实是孩子拯救了母亲!片子从孩子的角度出发,看似容易接受些,但实则更让人觉得残忍,男孩的独白好多地方直戳泪点,无耻弗兰克来演外祖父很出戏,最后这条线也不了了之了',
classification:['剧情'],
author:'20个小明'
},
{
articleTitle:'盗梦空间 Inception (2010)',
content:'攻心为上,盗梦亦如此,每个人的大脑都是一个黑洞,梦就是释放的魔鬼。 不打五分,就是你不懂这部片子,打低分就是你懂咯,🙃真不晓得导演所描述的是不是每个人所想的,哈哈。 想我这种,醒来顶多记得梦中梦,好想尝试自我修复啊。 下回睡觉就在微醺的时候播老太太的歌,然后带上我的幸运戒指睡觉',
classification:['科幻'],
author:'相逢何必不认识'
},
{
articleTitle:'看不见的客人 Contratiempo (2016)',
content:'《看不见的客人》采用的线索是一场车祸,隐藏线索是普通人和权势人物之间的斗争较量。影片讲述的故事是父母为失去的儿子报仇所付出的努力。父母采取的报仇方法是假扮成律师,直接与凶手接触,从凶手口中套出真相。凶手不断说谎,律师不断纠正凶手的谎言,假象和真实的回忆以及推理交织在一起,构成了这部电影的画面。',
classification:['悬疑'],
author:'蓝胖子'
},
{
articleTitle:'海蒂和爷爷 Heidi (2015)',
content:'海蒂失去了父母,于力失去了孩子,他们是两个被抛弃的人,恰好填补了对方缺失的部分。 来到克拉拉家,海蒂有了新衣服、新鞋子,有了食物,有了温暖的大床,她什么都有了,可是没有了爷爷、雪山和羊群。 你给了她物质生活,其实她要的是精神生活,要的是亲情和自由。 无数的规矩和礼仪把克拉拉压得喘不过气,让她产生了心病。不仅身体寸步难行,心理也被牢牢困住。 你以为你给了她一切,其实你根本不知道她想要的是什么。 正是蓝天和白云,青草和蝴蝶,让她打开心扉,融化了她内心的病魔。 当然,城里也有柔软的面包,山里也有人没有见识。城里并非一无是处,山里的人也不一定都是对的。 电影还有一条暗线,老师强迫海蒂认字,然而欲速则不达; 奶奶鼓励她自己看故事,从而培养了她的兴趣。果然没有教不会的学生,只有不会教的老师。',
classification:['剧情'],
author:'朝暮雪 '
},
],
},
})//数据来源于豆瓣热门影评
在展示页中引入临时数据
data () {
return {
blogs: this.$store.state.data,
search:'',
flag:true,
};
},
效果:
实现查询时博客展示内容刷新
computed: {
searchResults() {
// flag变量为判断搜索模式
// 使用filter()过滤器
// match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
if(this.flag) {
return this.blogs.filter((blog)=>{
return blog.articleTitle.match(this.search)
})
}
else {
return this.blogs.filter((blog)=>{
return blog.content.match(this.search)
})
}
}
},
效果:
出现问题
- 运行该查询代码会出现“删除,编辑”功能紊乱的bug。
- 例如对上述查询结果进行删除
会出现:
删除的是原数据中下标为1的数据。
- 因为搜索后*
<div v-for="(item,index) in searchResults" :key="index" class="blog">
中的index属性会重新排列,不再于数据中的数组下标相一致
解决方法
更改计算属性searchResults为如下:
computed: {
searchResults() {
// 1.在未进行查询时,先对原数据添加排序的下标值
// 2.删除时调用该设置的值便不会出错
// 3.进行删除/编辑后回到展示首页,数据出现变化,计算属性会给原数据重新添加排序的下标值
if(this.search=='') {
for(let i = 0;i<this.blogs.length;i++) {
this.blogs[i].id = i;
}
return this.blogs;
}
else {
// flag变量为判断搜索模式
// 使用filter()过滤器
// match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
if(this.flag) {
return this.blogs.filter((blog)=>{
return blog.articleTitle.match(this.search)
})
}
else {
return this.blogs.filter((blog)=>{
return blog.content.match(this.search)
})
}
}
}
},
删除键传参改为(编辑功能同理):
<button @click="remove(item.id)" class="delete"></button>
// 删除博客
remove(index) {
if(window.confirm('确定删除该博客吗?')) {
this.$store.state.data.splice(index,1);
}
效果:
更多推荐
所有评论(0)