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

原创 已于 2023-04-18 11:56:10 修改 · 2.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 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中转解决。

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);
      },
    },
  },
Nuxt：父传子,将字段作为v-model异常
一些平时在开发过程中遇到的常见问题，分享给大家
07-02 642
Nuxt：父传子,将字段作为v-model异常v-model cannot be used on a prop, because local prop bindings are not writable。
【vue3学习P5-P10】vue3语法；vue响应式实现
倚树探星的博客
02-04 1895
vue3语法，vue3响应式的实现
vue3项目报错：v-model cannot be used on a prop, because local prop bindings are not writable
肖肖肖丽珠的博客
08-07 933
我使用了一个子组件的弹窗。弹窗的显示隐藏是父组件传过来的一个值获取的。之前也这样写过是没有问题的。查看了一下我的vue版本3.4.31。官网上面介绍说从 Vue 3.4 开始，推荐的实现方式是使用。于是我们按照官网介绍改成了下面这样就行了。
Vue双向绑定原理（v-model）
wuxian_wj的博客
01-06 3722
之前有整理过Vue响应式原理，响应式主要的效果是数据改变了就会引起页面修改。关于v-model我们也不陌生，vue的双向绑定指令，页面修改会引起数据修改，数据修改页面也会跟着改变。我们直到数据->页面是由vue的响应式原理实现的，那么该怎么做到页面->数据的修改呢？ 表单绑定 v-model一般我们是在表单元素上进行使用，因为视图能影响数据，本质上是这个视图需要可交互，因此表单是实现这一交互的前提。表单的使用是以<input>、<textarea>、<select&
Vue前端报错：v-model cannot be used on a prop, because local prop bindings are not writable
xzhu博客
02-27 2936
v-model cannot be used on a prop
【Debug】前端报错: v-model cannot be used on a prop, because local prop bindings are not writable.
热门推荐
Fug_Lee的博客
02-21 2万+
前端报错: v-model cannot be used on a prop, because local prop bindings are not writable.
[plugin:vite:vue] 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.
06-30
在 Vue 3 中使用 Vite 构建项目时，如果尝试直接对 `props` 使用 `v-model`，会触发错误提示 `[plugin:vite:vue] v-model cannot be used on a prop`。这是因为 Vue 推崇单向数据流的设计模式，而 `v-model` 在本质...
[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.
最新发布
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` 是只读的，不能被直接赋值...
[plugin:vite:vue] 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. E:/develop/vite-project/client/src/views/A4Save.vue:5:42 3 | <a-form> 4 | <a-form-item label="编号" v-if="id"> 5 | <a-input readonly v-model:value="id"></a-input> | ^ 6 | </a-form-item> 7 | <a-form-item label="姓名">
07-22
在 Vite 和 Vue 项目中使用 `v-model` 时出现 `v-model cannot be used on a prop` 错误，通常是因为 `v-model` 被错误地应用在了组件的 prop 上，而不是组件内部的状态管理。Vue 的 `v-model` 是用于双向绑定数据的...
defineOptions({ name: "custom-tabs", }); defineProps<{ tabsItems: TabsItem[], activeTab: string, handleTabClick: (tab: TabsPaneContext, event: Event) => void; }>();父节点调用的时候customTabs报错 [vite] Internal server error: v-model cannot be used on a prop, because local prop bindings are not writable. 11:18:40 Use a v-bind binding combined with a v-on listener that emits update:x event instead. 怎么解决
06-17
如果直接将 `v-model` 应用于一个 `prop` 上，会触发错误 `'v-model cannot be used on a prop, because local prop bindings are not writable'`。这是因为 `prop` 是只读的，而 `v-model` 需要双向绑定，因此需要...
v-model cannot be used on a prop, because local prop bindings are not writable
Detectiveboy的博客
04-04 3945
defineModel
v-model cannot be used on a prop, because local prop bindings are not writable. Use a v-bind binding
开发日常，随手笔记。
02-28 1958
当需要更新值时，子组件可以触发一个自定义事件来通知父组件更新prop值（如果需要的话）。指令绑定到一个prop上，但Vue不允许这样做，因为prop是单向数据流，即父组件传递给子组件的数据，子组件不应该修改它。修饰符可以作为一个替代方案，它允许子组件触发一个更新父组件绑定值的更新事件。：子组件可以接收prop作为初始值，然后定义一个本地的data属性来存储这个值。的语法糖，用于创建双向数据绑定，它需要绑定的数据是可写的。用于prop时，Vue会抛出警告，提示prop绑定不是可写的。：在Vue 2.x中，
前端报错：VueCompilerError: v-model cannot be used on a prop, because local prop bindings are not writabl
ljqzxw的博客
08-08 6621
前端报错：VueCompilerError: v-model cannot be used on a prop, because local prop bindings are not writable.原因分析: 最新版本的 Vue 3 对语法检测更加严格, 之前我们可以通过 v-model 进行双向绑定, 但是现在会报上面的错误;解决办法: v-model=“show” 改写成 :modelValue=“show” 就可以了.
Vue3 v-model cannot be used on a prop,
洗刷先生的博客
01-09 8770
原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你。在子组件中去更改一个 prop。的方式是使用一个可写的，同时具有 getter 和 setter 的计算属性。所有的 props 都遵循着。
v-model cannot be used on a prop, because local prop bindings are not writable.Use a v-bind binding
qq_58692334的博客
07-27 2530
v-model cannot be used on a prop, because local prop bindings are not writable.Use a v-bind binding
v-mode1cannot be used on a prop,because local prop bindingsare not writable.Use a v-bind bindingcomb
weixin_47389477的博客
07-03 3164
vue自3.4版本以后，组件间数据双向绑定推荐使用defineModel()宏来实现，而不是用之前做法。
解决：v-model cannot be used on v-for or v-slot scope variables because they are not writable.报错问题
陈先生的博客
12-06 8792
在使用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 8392
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值