Vue 3 Internal server error: v-model cannot be used on a prop, because local prop bindings are not writable

我发现了这个错误并阻止了我的网络应用程序。

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

我想让计时器数据成为数据模型（可编辑）及其来自组件的props默认值。为什么这不起作用？我是 vuejs 的新手，我该如何解决这个问题？请帮助...

<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>

你必须把defineProps(['question', 'choices'])
改为
const props=defineProps(['question', 'choices'])。

在脚本中像<TextInput :text="props.question" ></TextInput>一样调用props.question。

Props 是只读的单向数据流。

使用一个内部数据属性，以timer作为初始值。像这样：

data() {
    return {
       localTimer: timer 
    }
}

和

 <input @keypress.enter="save" v-model="localTimer" type="number" class="input is-normal">

或者用v-bind:value & emit一个事件取代v-model。

@input="$emit('update:modelValue', $event.target.value)"

就像这样。

 <input @keypress.enter="save" :value="timer" @input="$emit('update:modelValue', $event.target.value)" type="number" class="input is-normal">