使用Vue.js构建动态菜谱筛选系统-优快云博客

本文链接：https://blog.youkuaiyun.com/oo_ring/article/details/120677600

本文介绍如何利用Vue.js和El-element组件库创建一个包含二级菜单的菜谱大全应用。通过获取数据并监听路由参数，实现实时筛选功能。同时，展示了如何根据用户选择的属性进行过滤，并动态更新路由。文章详细讲解了数据渲染、事件监听和参数传递等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天我们写菜谱大全

首先，拿到数据

getClassify().then((data) => {
      console.log(data);
      this.classify = data.data;
}

在data里面定义classify存放数据。

然后渲染数据

<el-tabs v-model="classifyName" type="border-card">

用watch监听路由传参，当参数改变，就赋值

watch: {
    $route: {
      handler() {
          //将路由里面的参数解析
        const { classify } = this.$route.query;
        if (classify) {
            // 赋值
          this.classifyType = classify;
          this.classifyName = classify[0];
        }
      },
      immediate: true,
    },
  },

但是第一次我们展示页面的时候要有一个默认值

data() {
    return {
      classify: [],
      classifyType: "1-1", //子级
      classifyName: "1", //刷新之后父级路由参数有，而视图没有变化。
    };
  },

此时，我们在router-link用query传参

然后给他们的父元素绑定事件。

<el-tabs type="border-card">
<el-tab-pane
        :label="item.parent_name"
        v-for="item in classify"
        :key="item.parent_type"
        :name="item.parent_type"
      >
        <div class="recipe-link">
          <router-link
            :to="{ query: { ...$router.query, classify: option.type } }"
            v-for="option in item.list"
            :key="option.type"
            :class="{ active: classifyType === option.type }"
          >
            {{ option.name }}
          </router-link>
        </div>
      </el-tab-pane>
</el-tabs>

此时就可以实现一个二级菜单且路径变化

接下来看下面的，还是先请求数据，渲染页面。

getProperty().then((data) => {
      console.log(data);
      this.property = data.data;
}

在data中定义要存储的数组

data() {
    return {
      classify: [],
      property: [],
      propertype: [],//存储分类的属性
      classifyType: "1-1", //子级
      classifyName: "1", //刷新之后父级路由参数有，而视图没有变化。
    };
  }

根据点击事件传参。

<el-collapse>
            <el-collapse-item
              :title="item.parent_name"
              v-for="item in property"
              :key="item.parent_type"
              :name="item.parent_type"
            >
              <div class="filter-tags">
                <el-tag
                  type="info"
                  v-for="option in item.list"
                  :key="option.type"
                  @click="selectedTag(option)"
                  :class="{'tag-selected':propertype[option.title]===option.type}"
                  >{{ option.name }}</el-tag>
              </div>
            </el-collapse-item>
          </el-collapse>

在data中定义数组

data() {
    return {
      classify: [],
      property: [],
      propertype: [],//存储分类的属性
      classifyType: "1-1", //子级
      classifyName: "1", //刷新之后父级路由参数有，而视图没有变化。
      propertyActiveName:[]
    };
  },

做判断

getProperty().then((data) => {
      console.log(data);
      this.property = data.data;
    //   拿到路由参数，解析
      const {query}=this.$route
    //   将property里面的参数存放到propertype
       this.propertype = this.property.reduce((o,item)=>{
        //    如果存在就赋值，不存在就等于空字符串
           o[item.title]=query[item.title]?query[item.title]:''
        //    预存，刷新后还存在
           if (o[item.title]) {
               this.propertyActiveName = push(o[item.title][0])
           }
           return o
       },{})
    });

写点击事件

methods: {
      selectedTag(option){
        //解析参数
          let query={...this.$route.query}
            //如果不选中就等于空字符串，且清除掉选中的状态
          if(this.propertype [option.title]===option.type){
              this.propertype[option.title]=''
              delete query[option.title]
          }else{
            //如果选中就赋值参数
              this.propertype[option.title]=option.type
              query[option.title]=option.type
          }
          this.$router.push({
              query
          })
      }
  },

此时就完成了！

冲冲冲！！！