javascript Vue 3内部服务器错误：v-model不能在prop上使用，因为本地prop绑定不可写

4ioopgfo 于 11个月前发布在 Java

关注(0)|答案(4)|浏览(1043)

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

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

字符串
我想让定时器数据成为数据模型（可编辑）和组件 prop 的默认值。为什么这不工作？我在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>

型

JavaScript

来源：https://stackoverflow.com/questions/75123650/vue-3-internal-server-error-v-model-cannot-be-used-on-a-prop-because-local-pro

4条答案

按热度按时间

1sbrub3j1#

你必须改变defineProps(['question', 'choices'])
到
const props=defineProps(['question', 'choices'])个
在类似<TextInput :text="props.question" ></TextInput>的脚本中调用props.question

赞(0）回复(0）举报 11个月前

mefy6pfw2#

v-model="timer"

字符串
改变

:modelValue="timer"
@update:modelValue="timer = $event"

型
参考：https://learnvue.co/articles/v-model-guide

赞(0）回复(0）举报 11个月前

qxsslcnc3#

prop 是只读的单向数据流
使用内部数据属性，初始值为timer。如下所示：

data() {
    return {
       localTimer: timer 
    }
}

字符串
和

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

型
或者将v-model替换为v-bind:value & emit事件

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

型

赞(0）回复(0）举报 11个月前

ev7lccsx4#

你可以用computed function来实现：

const emit = defineEmits(['update:timer']);
const newTimer = computed({
  get: () => props. timer,
  set: (newValue) => emit('update:timer', newValue),
});

字符串
并将其用于输入：
第一个月

赞(0）回复(0）举报 11个月前

我来回答

javascript Vue 3内部服务器错误：v-model不能在prop上使用，因为本地prop绑定不可写

4条答案

相关问题

热门标签

最新问答