Quantity input change #1485
Quantity input change #1485
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| import { formatPrice } from "@/utils/functions"; | ||
|
|
||
| const isRemoving = ref(false); | ||
| const isUpdating = ref(false); | ||
| const localQuantity = ref(props.product.quantity); |
Check warning
Code scanning / CodeQL
Variable not declared before use Warning
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 7 days ago
To fix the issue, the declaration of props should be moved above its first usage on line 59. This ensures that the variable is declared before it is used, improving code readability and adhering to best practices. Specifically, the defineProps call for props should be relocated to the top of the <script setup> block, before any other code that references props.
| @@ -56,2 +56,9 @@ | ||
|
|
||
| const props = defineProps({ | ||
| product: { | ||
| type: Object, | ||
| required: true, | ||
| }, | ||
| }); | ||
|
|
||
| const isRemoving = ref(false); | ||
| @@ -67,9 +74,2 @@ | ||
|
|
||
| const props = defineProps({ | ||
| product: { | ||
| type: Object, | ||
| required: true, | ||
| }, | ||
| }); | ||
|
|
||
| const emit = defineEmits(["remove", "update-quantity"]); |
| import { formatPrice } from "@/utils/functions"; | ||
|
|
||
| const isRemoving = ref(false); | ||
| const isUpdating = ref(false); | ||
| const localQuantity = ref(props.product.quantity); |
Check failure
Code scanning / CodeQL
Property access on null or undefined Error
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 7 days ago
To fix the issue, the code should directly access the product prop defined by defineProps instead of attempting to access props.product. In Vue's <script setup> syntax, props are directly accessible as variables without needing to reference a props object. This change ensures that the code adheres to Vue's conventions and avoids runtime errors.
The following changes will be made:
- Replace all instances of
props.productwithproduct. - Ensure that the
productprop is correctly accessed throughout the script.
| @@ -58,6 +58,6 @@ | ||
| const isUpdating = ref(false); | ||
| const localQuantity = ref(props.product.quantity); | ||
| const localQuantity = ref(product.quantity); | ||
|
|
||
| watch( | ||
| () => props.product.quantity, | ||
| () => product.quantity, | ||
| (newVal) => { | ||
| @@ -81,3 +81,3 @@ | ||
| isRemoving.value = true; | ||
| emit("remove", props.product.key); | ||
| emit("remove", product.key); | ||
| }; | ||
| @@ -85,5 +85,5 @@ | ||
| const onQuantityChange = (newQuantity) => { | ||
| if (newQuantity === props.product.quantity || isUpdating.value) return; | ||
| if (newQuantity === product.quantity || isUpdating.value) return; | ||
| isUpdating.value = true; | ||
| emit("update-quantity", { key: props.product.key, quantity: newQuantity }); | ||
| emit("update-quantity", { key: product.key, quantity: newQuantity }); | ||
| // UI disables controls while updating; parent resets isUpdating via prop or reactivity |
No description provided.