It seems that directly changing the props value in a child component is not recommended, but I have discovered a way to do it successfully. I am curious about the reasoning behind this behavior.
Just for context: I am working with vue3+vite
For instance:
<template>
<input v-model="price"/>
</template>
<script lang="ts" setup>
defineProps({
price : Number
});
</script>
This code snippet can modify the props value based on user input without any warnings or errors.
On the other hand, if I write it like this:
<template>
<input v-model="props.price"/>
</template>
<script lang="ts" setup>
const props = defineProps({
price : Number
});
</script>
A warning will appear in the console when trying to change the prop value directly.
I want to point out that no computed property was implemented to handle the prop change.
Is this considered a bad practice?