Vue项目美食杰详情页

最新推荐文章于 2023-04-02 10:11:36 发布

原创

最新推荐文章于 2023-04-02 10:11:36 发布 · 403 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍如何利用Vue.js和Element.Ui组件库创建美食详情页，通过路由参数获取用户信息，根据数据渲染页面。同时讲解了如何实现用户收藏功能，包括状态判断、收藏隐藏显示切换以及数据存储。此外，还涉及评论数据的后端请求和自定义事件提交。

效果图

1.思路：根据menuId请求数据来渲染页面，推荐使用组件Element.Ui，通过获取路由参数来判断登录用户

data() {
    return {
      menuInfo: {
        userInfo: {},
        raw_material: {
          main_material: [],
          accessories_Materiak: [],
        },
        steps: [],
      },
    };
  },
 watch: {
    $route: {
      handler() {
        let { menuId } = this.$route.query;//获取路由参数
        if (menuId) {//判断用户
          //异步获取数据
          menuInfo({ menuId }).then(({ data }) => {
            console.log(data);
            this.menuInfo = data.info;
          });
        } else {
          th