admin管理员组文章数量:1405544
when using the selctCategory function to replace the existing route parameters, I receive an error that states "devices:1 Uncaught (in promise) Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function."
it only happens when replacing/pushing new parameters from the same route, when i type the route or push to it from a different route it loads without a recursion error.
AdminProducts.vue
<template>
<div class="flex justify-center items-center w-[100%] h-[100%] rounded-r-lg">
<div class="flex flex-col justify-start w-[95%] h-[95%] shadow-lg rounded-lg border-[2px] border-slate-300">
<div class="flex justify-between items-center w-full h-[7.5%] rounded-t-lg px-2">
<div class="flex h-full justify-center items-center text-lg text-black font-semibold ">
<h1>Products</h1>
</div>
<div class="flex h-full items-center gap-x-3">
<button class="bg-transparent hover:bg-black text-black h-2/3 flex items-center gap-x-1 font-semibold hover:text-white px-2 border border-black hover:border-transparent rounded">
<i class="fa-solid fa-filter text-sm"></i>
<div>Filter</div>
</button>
<button class="bg-transparent hover:bg-black text-black h-2/3 flex items-center gap-x-1 font-semibold hover:text-white px-2 border border-black hover:border-transparent rounded">
See All
</button>
<button class="bg-transparent hover:bg-black text-black h-2/3 flex items-center gap-x-1 font-semibold hover:text-white px-2 border border-black hover:border-transparent rounded">
<i class="fa-solid fa-plus text-sm"></i>
<div>Add Product</div>
</button>
</div>
</div>
<div class="flex justify-start items-center ps-2 w-full h-[5.5%] border-y-[2px] border-slate-200">
<div class="flex gap-x-2 w-[25%]">
<input type="checkbox">
<div class="flex items-center gap-x-2 ">
<div>Product Name</div>
<i class="fa-solid fa-caret-down text-sm mt-1"></i>
</div>
</div>
<div class="flex items-center w-[15%] gap-x-3">
<div @click="dropdowner(categoryDropDown)" >Category</div>
<i class="fa-solid fa-caret-down text-sm mt-1"></i>
<div ref="categoryDropDown" class="absolute translate-y-[59%] translate-x-[-5%] w-22 px-2 py-1 hidden flex-col bg-slate-100">
<div @click="selectCategory('starter-kits')">Starter Kits</div>
<div @click="selectCategory('devices')" >Devices</div>
<div @click="selectCategory('tanks')">Tanks</div>
<div @click="selectCategory('e-liquids')">ELiquids</div>
<div @click="selectCategory('alternatives')">Alternatives</div>
<div @click="selectCategory('disposables')">Disposables</div>
</div>
</div>
<div class="flex items-center w-[15%] gap-x-2">
<div>Price</div>
<i class="fa-solid fa-caret-down text-sm mt-1"></i>
</div>
<div class="flex items-center w-[15%] gap-x-2">
<div>Stock</div>
<i class="fa-solid fa-caret-down text-sm mt-1"></i>
</div>
<div class="flex items-center w-[15%] gap-x-2">
<div>Status</div>
<i class="fa-solid fa-caret-down text-sm mt-1"></i>
</div>
<div class="flex items-center w-[15%] gap-x-2">
<div>Action</div>
<i class="fa-solid fa-caret-down text-sm mt-1"></i>
</div>
</div>
<div ref="table" v-for="(product, index) in Products" :id="index" class="flex justify-start items-center w-full h-[8%] ">
<div class="flex h-full items-center w-[7%]">
<div class="flex gap-x-2 aspect-square h-[80%] ps-2" >
<input type="checkbox">
<img class="hover:brightness-50 border-[1px] border-slate-400" :src="'http://127.0.0.1:8000/media/' + product.featuredImage1" alt="">
</div>
</div>
<div class="flex text-ellipsis truncate w-[13%] mr-[5.5%]">
{{ product.productName.charAt(0) + product.productName.toLowerCase().slice(1) }}
</div>
<div class="flex w-[10%] mr-[5%]">
{{ product.category.charAt(0) + product.category.toLowerCase().slice(1) }}
</div>
<div class="flex w-[10%] mr-[5%]">
{{ product.productPrice }}
</div>
<div class="flex w-[10%] mr-[4.5%]">
{{ product.productInventory }}
</div>
<div class="flex w-[10%] mr-[5%]">
Status(TODO)
</div>
<div class="flex justify-start items-center h-2/3 w-[7%] ">
<button class=" flex justify-center items-center h-full w-[80%] border-black border bg-white text-black rounded-y rounded-s hover:bg-black hover:text-white hover:border-transparent">
<div class="font-semibold">Edit</div>
</button>
<button class="h-full w-[20%] flex flex-col justify-center gap-y-1 border-black border-y border-r bg-white rounded-r hover:bg-black hover:border-transparent hover:text-white pe-[2px] ">
<i class="fa-solid fa-circle text-[3px] "></i>
<i class="fa-solid fa-circle text-[3px] "></i>
<i class="fa-solid fa-circle text-[3px] "></i>
</button>
</div>
</div>
<div class="flex justify-between items-center w-full border-t-[2px] border-slate-200 h-[7%] rounded-b-lg px-5">
<button class="flex items-center gap-x-2 bg-transparent text-black h-2/3 font-semibold px-2 border border-white hover:border-black rounded">
<i class="fa-solid fa-arrow-left"></i>
<div>Previous</div>
</button>
<div>
Page Number
</div>
<button class="flex items-center gap-x-2 bg-transparent text-black h-2/3 font-semibold px-2 border border-white hover:border-black rounded">
<div>Next</div>
<i class="fa-solid fa-arrow-right mt-1"></i>
</button>
</div>
</div>
</div>
</template>
<script setup>
import { useRouter,useRoute } from 'vue-router'
import{ ref, watch, computed } from 'vue'
import gql from 'graphql-tag'
import { useQuery } from '@vue/apollo-composable'
const router = useRouter()
const route = useRoute()
const CHARACTERS_QUERY = gql`
query(
$CategoryName: String,
$Brand: String,
$BatteryType : String,
$BatterySize : String,
$MaxWattage : String,
$Capacity : String,
$AirflowStyle : String,
$CoilStyle : String,
$DripTip : String,
$Flavor : String,
$BottleSize : String,
$NicotineAmount : String,
$TobaccoFree : String,
$SubOhm : String,
$SaltNicotine : String,
$PuffCount : String,
$EliquidCapacity : String,
$PriceMin : Float,
$PriceMax : Float
) {
productsFiltering(
CategoryName: $CategoryName,
Brand: $Brand,
BatteryType: $BatteryType,
BatterySize: $BatterySize,
MaxWattage: $MaxWattage,
Capacity: $Capacity,
AirflowStyle: $AirflowStyle,
CoilStyle: $CoilStyle,
DripTip: $DripTip,
Flavor: $Flavor,
BottleSize: $BottleSize,
NicotineAmount: $NicotineAmount,
TobaccoFree: $TobaccoFree,
SubOhm: $SubOhm,
SaltNicotine: $SaltNicotine,
PuffCount: $PuffCount,
EliquidCapacity: $EliquidCapacity,
PriceMin: $PriceMin,
PriceMax: $PriceMax
){
productName,
productInventory,
category,
productPrice,
brandName{
name
},
productPrice,
featuredImage1,
deviceBatteryType{
option
},
deviceBatterySize{
option
},
deviceMaxWattage{
option
},
tankCapacity{
option
},
tankAirflowStyle{
option
},
tankCoilStyle{
option
},
tankDripTip{
option
},
ejuiceFlavor{
option
},
ejuiceBottleSize{
option
},
ejuiceNicotineAmount{
option
},
ejuiceTobaccoFree{
option
},
ejuiceSubOhm{
option
},
ejuiceSaltNicotine{
option
},
disposableFlavor{
option
},
disposablePuffCount{
option
},
disposableEjuiceCapacity{
option
},
}
}
`
const { result, loading, error, } = useQuery(CHARACTERS_QUERY, {
CategoryName : route.params.category,
Brand : route.query.brand,
BatteryType : route.query.battery_type,
BatterySize : route.query.battery_size,
MaxWattage : route.query.max_wattage,
Capacity : route.query.capacity,
AirflowStyle : route.query.airflow_style,
CoilStyle : route.query.coil_style,
DripTip : route.query.drip_tip,
Flavor : route.query.flavor,
BottleSize : route.query.bottle_size,
NicotineAmount : route.query.nicotine_amounts,
TobaccoFree : route.query.tobacco_free,
SubOhm : route.query.sub_ohm,
SaltNicotine : route.query.salt_nicotine,
PuffCount : route.query.puff_count,
EliquidCapacity : route.query.eliquid_capacity,
PriceMin : Number(route.query.price_min),
PriceMax : Number(route.query.price_max)
})
const Products = computed(() => {
if(result.value){
return result.value.productsFiltering
}
})
const table = ref(null)
watch(table, () => {
table.value.forEach((element) => {
if(Number(element.id) % 2 !== 0){
element.style.backgroundColor = "rgba(150,150,150, .3)"
}
})
})
const categoryDropDown = ref(null)
const dropdowner = (drop) => {
if(drop.style.display === 'flex'){
drop.style.display = 'none'
} else {
drop.style.display = 'flex'
}
}
const selectCategory = (category) => {
router.replace({
name: 'adminProducts',
params: {
category: category
}
})
}
</script>
I don't think its related to using a nested route but just in case
index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import ProductPage from '../views/ProductPage.vue'
import CategoryPage from '@/views/CategoryPage.vue'
import AdminAddProduct from '@/views/AdminAddProduct.vue'
import Admin from '@/views/Admin.vue'
import AdminDashboard from '@/views/AdminDashboard.vue'
import AdminProducts from '@/views/AdminProducts.vue'
import AdminSales from '@/views/AdminSales.vue'
import AdminCustomers from '@/views/AdminCustomers.vue'
import AdminAnalytics from '@/views/AdminAnalytics.vue'
import AdminNotifications from '@/views/AdminNotifications.vue'
import AdminSettings from '@/views/AdminSettings.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/productpage/:name',
name: 'productPage',
component: ProductPage,
meta: {
title: 'Results'
}
},
{
path: '/categories/:category',
name: 'categoryPage',
component: CategoryPage,
meta: {
title: 'Category'
}
},
{
path: '/admin/',
name: 'admin',
component: Admin,
meta: {
title: 'Admin'
},
children: [
{
path: 'dashboard',
name: 'adminDashboard',
component: AdminDashboard,
},
{
path: 'products/:category?',
name: 'adminProducts',
component: AdminProducts,
},
{
path: 'sales',
name: 'adminSales',
component: AdminSales,
},
{
path: 'customers',
name: 'adminCustomers',
component: AdminCustomers,
},
{
path: 'analytics',
name: 'adminAnalytics',
component: AdminAnalytics,
},
{
path: 'notifications',
name: 'adminNotifications',
component: AdminNotifications,
},
{
path: 'settings',
name: 'adminSettings',
component: AdminSettings,
},
],
},
]
})
export default router```
I've tried removing any watch functions and any data displayed in the template through refs with no success
本文标签：
版权声明：本文标题：vue.js - Maximum recursive updates exceeded error when pushingreplacing existing route with different parameter - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744319291a2600416.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论