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);
      }

效果：