[vite] v-model cannot be used on a prop,这是什么问题？

原创已于 2023-04-18 11:56:10 修改 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-04-18 11:43:45 首次发布

博客指出Vue推荐单向数据流，不建议v-model绑定props传值。新版本@vitejs/plugin-vue对此要求更严格，直接使用v-model绑定props传值会报错，如出现[vite] v-model cannot be used on a prop错误，可使用computed中转解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue推荐单向数据流，不推荐v-model绑定props的传值
新版本@vitejs/plugin-vue要求更严格了，v-model绑定props的传值直接报错

 props: {
    dialogTableVisible: string,
  },

v-model绑定props中的传值，就会出现[vite] v-model cannot be used on a prop报错

  <el-dialog
    v-model="dialogTableVisible"
    ...

使用computed中转下

computed: {
    dialogVisible: {
      get() {
        return this.dialogTableVisible;
      },
      set(v) {
        this.$emit('update:dialogTableVisible', v);
      },
    },
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

永远不会太晚

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3项目报错：v-model cannot be used on a prop, because local prop bindings are not writable

肖肖肖丽珠的博客

08-07

744

我使用了一个子组件的弹窗。弹窗的显示隐藏是父组件传过来的一个值获取的。之前也这样写过是没有问题的。查看了一下我的vue版本3.4.31。官网上面介绍说从 Vue 3.4 开始，推荐的实现方式是使用。于是我们按照官网介绍改成了下面这样就行了。

vue2项目升级到vue3经历分享2

warrah 南极狼

04-27

643

下面的代码，在webpack中可以build通过，但是在vite中是不行，明显是代码错误，但是开发工程师却忽略了。期望仅有一个子元素或组件作为其内容，但你可能提供了多个子元素或没有提供任何子元素。在vue2中cdn使用，在public中放入js，如果cdn失效则取本地的js。是因为 prop 是单向数据流，父组件向子组件传递值，子组件不应直接修改这些值。升级的代价并不是那么简单，一篇文章。处理方案如下,按照下面进行拆分。中指定外部cdn资源的分发。然后watch其变化即可。

参与评论您还未登录，请先登录后发表或查看评论

Vue前端报错：v-model cannot be used on a prop, because local prop bindings are not writable

xzhu博客

02-27

2814

v-model cannot be used on a prop

vue3 报错

weixin_43746297的博客

05-06

240

问题1.v-model cannot be used on a prop, because local prop bindings are not writable.v-model改为:modelValue。

【Debug】前端报错: v-model cannot be used on a prop, because local prop bindings are not writable.

最新发布

07-22

[vite] Internal server error: v-model cannot be used on a prop, because local prop bindings are not writable. ``` 该错误提示明确指出不能对 `prop` 使用 `v-model`，因为 `prop` 是只读的，不能被直接赋值...

v-model cannot be used on a prop, because local prop bindings are not writable.Use a v-bind binding

qq_58692334的博客

07-27

2465

v-model cannot be used on a prop, because local prop bindings are not writable.Use a v-bind binding

v-model cannot be used on a prop, because local prop bindings are not writable. Use a v-bind binding

开发日常，随手笔记。

02-28

1243

当需要更新值时，子组件可以触发一个自定义事件来通知父组件更新prop值（如果需要的话）。指令绑定到一个prop上，但Vue不允许这样做，因为prop是单向数据流，即父组件传递给子组件的数据，子组件不应该修改它。修饰符可以作为一个替代方案，它允许子组件触发一个更新父组件绑定值的更新事件。：子组件可以接收prop作为初始值，然后定义一个本地的data属性来存储这个值。的语法糖，用于创建双向数据绑定，它需要绑定的数据是可写的。用于prop时，Vue会抛出警告，提示prop绑定不是可写的。：在Vue 2.x中，

v-mode1cannot be used on a prop,because local prop bindingsare not writable.Use a v-bind bindingcomb

weixin_47389477的博客

07-03

2450

vue自3.4版本以后，组件间数据双向绑定推荐使用defineModel()宏来实现，而不是用之前做法。

解决：v-model cannot be used on v-for or v-slot scope variables because they are not writable.报错问题

陈先生的博客

12-06

8480

在使用vue进行前端开发时，可能会遇到循环渲染input输入框的需求，当使用v-for循环后，对v-model进行值的绑定时，可能会出现以下错误,如图所示： v-model cannot be used on v-for or v-slot scope variables because they are not writable.错误代码：通过查阅文档发现，v-model 不可以直接修改 v-for 循环迭代时别名上的数据解决方法：我们可以使用对象的索引来进行v-model的值的绑定。通过以上的方

vue2.0+ 使用v-model 及报错解决办法；

fly_wugui的博客

08-12

8349

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <

Vue3 v-model非兼容更改

weixin_45663702的博客

08-01

975

Vue3 v-model非兼容更改

VUE循环对象绑定v-model报错

Moria

05-18

4493

v-for 循环时直接使用 v-model 绑定报错将 v-model 直接绑定到 v-for 迭代别名。这将无法修改 v-for 源数组，因为写入别名就像修改函数局部变量一样。考虑使用一个对象数组并在对象属性上使用 v-model。原因：v-model 不可以直接修改 v-for 循环迭代时别名上的数据，但是，可以通过 index 下标来引用所需的数据，可以达到相同目的。 // 错误代码 <div v-for="(item, index) in data" :key="index"&gt

vue报错v-model cannot be used on v-for or v-slot scope variables because they are not writable

天南之南

02-01

3134

vue报错v-model cannot be used on v-for or v-slot scope variables because they are not writable

vue-router报错Cannot read properties of undefined (reading'value')

04-30

### Vue Router 中 `Cannot read properties of undefined (reading 'value')` 错误分析与解决方案在 Vue 应用中，当遇到 `Cannot read properties of undefined (reading 'value')` 的错误时，通常是因为尝试访问了一个未定义的对象属性或者变量。这种问题可能发生在路由导航逻辑中，尤其是在异步操作或生命周期钩子函数中的不当处理。 #### 可能的原因及解决办法： 1. **检查对象是否存在** 如果代码中有类似以下片段： ```javascript const someObject = ref(null); console.log(someObject.value.someProperty); // 报错 ``` 这里会抛出 `Cannot read properties of undefined (reading 'someProperty')` 的错误，因为在访问 `.value` 之前，`someObject` 被初始化为 `null` 或者尚未赋值[^1]。解决方案是在访问前增加判断条件： ```javascript if (someObject.value && someObject.value.someProperty) { console.log(someObject.value.someProperty); } ``` 2. **确保数据加载完成后再执行路由跳转** 当使用 `router.push()` 方法时，如果依赖的数据还未完全加载就调用了该方法，则可能导致类似的错误。例如： ```javascript const fetchData = async () => { await new Promise((resolve) => setTimeout(resolve, 1000)); dataLoaded.value = true; }; fetchData(); router.push('/new-route'); // 数据未准备好即跳转可能会引发错误 ``` 此处可以通过监听数据状态来延迟路由跳转： ```javascript watchEffect(() => { if (dataLoaded.value) { router.push('/new-route'); } }); ``` 3. **结合 `nextTick` 防止同步更新引起的冲突** 类似于引用[2]提到的情况，某些场景下直接调用 `router.push()` 可能会导致上下文中部分数据未及时刷新而报错。此时可采用 `nextTick` 来等待 DOM 更新完成后才进行跳转： ```javascript import { nextTick } from 'vue'; const confirmPlatform = (p) => { platform.value = p.name; current.value = 'step1'; nextTick(() => { router.push({ name: 'GoodsStep1', query: { platform: p.name }, }); }); }; ``` 4. **确认路由配置无误** 若路由配置文件存在问题也可能间接导致此类异常。比如缺少必要的命名路径或参数匹配不一致等情况均需仔细核查。以下是标准的动态路由设置方式作为参考： ```javascript const routes = [ { path: '/goods/:platform?', name: 'GoodsStep1', component: GoodsComponent, props: route => ({ ...route.query }), }, ]; ``` 5. **排查 Vite 构建工具相关问题** 对于基于 Vite 开发的应用程序来说，构建阶段可能出现语法解析失败从而影响运行期表现。如引用[3]所描述，“v-model cannot be used on a prop”，这表明模板编写存在潜在隐患需要修正。具体调整如下所示： ```html  <child-component :model-value="parentValue" @update:model-value="(val) => parentValue = val"></child-component> ``` 综上所述，针对 `Cannot read properties of undefined (reading 'value')` 的根本原因在于未能妥善管理响应式数据以及其关联的操作流程。通过以上措施能够有效规避这类常见陷阱并提升应用稳定性。 --- ### 示例代码 ```javascript import { ref, nextTick } from 'vue'; import { useRouter } from 'vue-router'; const router = useRouter(); // 定义响应式变量 const platform = ref(''); const current = ref(''); // 平台切换逻辑封装 function confirmPlatform(p) { platform.value = p?.name || ''; current.value = 'step1'; // 使用 nextTick 确保视图更新完毕再跳转 nextTick(() => { try { router.push({ name: 'GoodsStep1', query: { platform: platform.value }, }); } catch (error) { console.error('Route navigation failed:', error.message); } }); } ``` ---