vue.js - 我如何在vue js中的一页路由下显示不同的category._id

Question

我试图在一条路线下显示多个类别，点击第一个类别显示我的产品，但是当我点击另一个类别时它不显示产品，直到硬刷新我的页面，现在显示产品列表在category._id下这就是我去类别路线的方式

<nav class="navbar-end">
          <div
            class="pt-4 p-3"
            v-for="category in categories"
            :key="category._id"
          >
            <router-link :to="`/categories/${category._id}`">
              {{ category.type }}
            </router-link>
          </div>

        </nav>

这是我的脚本标签，用于获取类别下的产品列表。_id

<script>

import axios from "axios";
export default {
  name: "Product",
  components: {},
  data() {
    return {
      category: {},
      categories: [],
      products: [],
      catID: []
    };
  },
  mounted() {
    axios
      .get(
        `http://localhost:5000/api/categories/${this.$route.params.id}`,
        {}
      )
      .then(response => {
        console.log(response);
        this.category = response.data.category;
      })
      .catch(error => {
        console.log(error);
        error;
      });

    axios
      .get(`http://localhost:5000/api/products`, {})
      .then(response => {
        console.log(response);

        this.products = response.data.products;
        const catID = this.category._id;
        // this.products = this.products.filter(
        //  ({ category }) => catID === category._id
        // );
      })
      .catch(error => { 
        error;
      });
   
  },
 
  computed: {
    currentProducts() {
      if (!this.category._id) {
        return this.products;
      }
      return this.products.filter(
        ({ category }) => category._id === this.category._id
      );
    }
  },
  methods: {
    ...mapActions(["addProductToCart"]),
    logout() {
      localStorage.clear();
      this.$router.push("/login");
    }
  }
};
</script>

这是我的分类路线

  {
    path: "/categories/:id",
    name: "Category",
    component: Category
  },

我在点击第一个类别后得到了产品，但是点击另一个类别改变了我的 category.id url 但直到我硬刷新才更新，它现在显示产品列表请问我如何在同一个上显示产品带有硬刷新的 category.id 路由

Answer 1

那是因为 mounted block 中的代码只执行一次要在每次选择不同的类别时进行提取，您可以定义一个方法来调用 api 并在 watch 和 mounted

中触发它

watch: {
 '$route.params.id': {
   handler(newVal) {
     this.loadCategories(newVal);
   }
  }
},
mounted() {
 this.loadCategories(this.$route.params.id);
 axios
      .get(`http://localhost:5000/api/products`, {})
      .then(response => {
        console.log(response);

        this.products = response.data.products;
        const catID = this.category._id;
      })
      .catch(error => { 
        error;
      });
},
methods: {
 loadCategories(id) {
  axios
      .get(
        `http://localhost:5000/api/categories/${id}`,
        {}
      )
      .then(response => {
        console.log(response);
        this.category = response.data.category;
      })
      .catch(error => {
        console.log(error);
        error;
      });
  }
}