I found this error and blocked my webapps.
2:32:22 PM [vite] Internal server error: v-model cannot be used on a prop, because local prop bindings are not writable.
Use a v-bind binding combined with a v-on listener that emits update:x event instead.
Plugin: vite:vue
File: /Users/julapps/web/myapp/src/components/switch/AudienceTimerSlide.vue
I want to make timer data become data model (editable) and its default value from component props. Why this not work? I'm very new in vuejs, how can i solve this problem? Kindly Please Help...
<template>
----
<div class="field-body">
<div class="field">
<div class="control">
<input @keypress.enter="save" v-model="timer" type="number" class="input is-normal">
</div>
</div>
</div>
-----
</template>
<script>
export default {
props:['id', 'timer'],
setup(props, context){
-----
const save = async() => {
// save form
}
return {
}
}
}
</script>
Props are read-only One-Way Data Flow
Use an internal data property with timer
as initial value. Like this:
data() {
return {
localTimer: timer
}
}
and
<input @keypress.enter="save" v-model="localTimer" type="number" class="input is-normal">
Or replace v-model
with v-bind:value
& emit
an event
@input="$emit('update:modelValue', $event.target.value)"
Like this:
<input @keypress.enter="save" :value="timer" @input="$emit('update:modelValue', $event.target.value)" type="number" class="input is-normal">