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

最新推荐文章于 2024-05-22 16:27:33 发布
最新推荐文章于 2024-05-22 16:27:33 发布
阅读量8.2k 收藏
点赞数
分类专栏： vue技巧以及问题总结 文章标签： vue.js v-model  Avoid mutating a prop directly
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fly_wugui/article/details/81611468
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div id="app">
        <child-vue v-model="test"></child-vue>
        <p>{{ test }}</p>
        <button @click="changChild">改变子组件值</button>
    </div>
</body>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
    var childVue = {
        template:"<div><div>{{ msg }}</div><button @click=\"changeFater\">改变父组件值</button></div>",
        data(){
            return {
                message:this.msg // 划重点 不定义这个属性会有报错；
            }
        },
        props:{
            msg:0 //父子间传递数据
        },
        model:{
            prop:"msg",//父子间传递数据的属性名称
            event:"msgEvent"//定义传递数据到父组件的事件名称
        },
        methods:{
            changeFater(){
                this.message = this.msg;// 将数据同步
                this.$emit("msgEvent",this.message+=2)// 将同步好的数据传递到父组件
            }
        }
    }
     var vue = new Vue({
        el:"#app",
        data:{
            test:0
        },
        methods:{
            changChild(){
                this.test+=1
            }
        },
        components:{
            childVue
        }
     })
</script>
</html>
moguPeople
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 2.0组件与v-model详解
08-31
总的来说，Vue 2.0 的组件配合 `v-model` 指令，为构建复杂的表单和交互逻辑提供了简洁的解决方案。通过这种方式，我们可以在不直接操作子组件内部状态的情况下，轻松地管理组件间的数据流动，使得应用的代码更清晰...
vue-video-player:vue2.0+vue-video-player实现hls播放全过程
04-28
Vue VUE，这是VUE 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and ...
前端报错：VueCompilerError: v-model cannot be used on a prop, because local prop bindings are not writabl
ljqzxw的博客
08-08 5076
前端报错：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 8337
原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你。在子组件中去更改一个 prop。的方式是使用一个可写的，同时具有 getter 和 setter 的计算属性。所有的 props 都遵循着。
‘v-model‘ directives require no argument
最新发布
qq_55873376的博客
05-22 357
关闭语法检查， 保存，再看项目，正常运行！我们可以把eslint对该插件的检查关闭。对vetur进行了eslint检查。在VScode中，打开“
【Debug】前端报错: v-model cannot be used on a prop, because local prop bindings are not writable.
热门推荐
Fug_Lee的博客
02-21 1万+
前端报错: v-model cannot be used on a prop, because local prop bindings are not writable.
v-model cannot be used on a prop, because local prop bindings are not writable.Use a v-bind binding
qq_58692334的博客
07-27 2016
v-model cannot be used on a prop, because local prop bindings are not writable.Use a v-bind binding
Vue前端报错：v-model cannot be used on a prop, because local prop bindings are not writable
xzhu博客
02-27 1411
v-model cannot be used on a prop
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
基于vue2.0 +vuex+ element-ui后台管理系统
01-01
dev-permission分支：增加了权限管理(包括页面权限和按钮权限)的功能和顶栏三级菜单显示，完全剥离nodejs后台，使用mockjs模拟数据，让用户只需关注前端，更容易上手学习。目前此分支为正常维护分支
详解vue2.0+vue-video-player实现hls播放全过程
08-27
本文将详细介绍如何使用 Vue 2.0 和 Vue-Video-Player 实现 HLS 播放全过程。通过本文，您将了解到如何使用 Vue-Video-Player 实现 HLS 播放，如何配置 Video-Player Options，如何使用 Vue 组件来实现视频播放器等...
[vite] v-model cannot be used on a prop,这是什么问题？
个人博客
04-18 1936
v-model绑定props中的传值，就会出现[vite] v-model cannot be used on a prop报错。因为prop的值，vue推荐单向数据流，不推荐v-model绑定props的传值。新版本vite要求更严格了，v-model绑定props的传值直接报错。使用computed中转下。
vue报错v-model cannot be used on v-for or v-slot scope variables because they are not writable
天南之南
02-01 2475
vue报错v-model cannot be used on v-for or v-slot scope variables because they are not writable
解决：v-model cannot be used on v-for or v-slot scope variables because they are not writable.报错问题
陈先生的博客
12-06 6765
在使用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的值的绑定。 通过以上的方
在子组件中，v-model props属性时，报错了怎么解决
weixin_65908792的博客
03-21 1139
在组件中，v-model props属性时，报错了怎么解决
VUE循环对象绑定v-model报错
Moria
05-18 4397
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
vue3 组件使用 v-model
guizi0809的博客
07-02 430
v-model 的参数 默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。 child-component.vue <template> <div> <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"> </di
vue3 子组件上绑定(v-model=“xx“) 父组件传过来的值后报错
weixin_42792519的博客
01-10 1万+
解决子组件绑定父组件值后的报错
vue.2.2.1版本
weshouldhelp的博客
10-29 5451
/*! *转载自https://unpkg.com/vue@2.2.1/dist/vue.js * Vue.js v2.2.1 * (c) 2014-2017 Evan You * Released under the MIT License. */ (function (global, factory) { typeof exports === 'object' &amp;&...
Vue2.0 + Element-ui2实现分页
05-14
要使用Vue2.0和Element-ui2实现分页，你可以按照以下步骤进行操作： 1.安装Element-ui ``` npm i element-ui -S ``` 2.在main.js中引入Element-ui ``` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3.在需要使用分页的组件中引入el-pagination组件，并设置相关参数 ``` <template> <div> <el-pagination :total="total" //总条数 :page-size="pageSize" //每页显示条数 :current-page.sync="currentPage" //当前页数 layout="total, sizes, prev, pager, next, jumper" //分页布局 :page-sizes="[10, 20, 30, 50]" //每页显示条数选项 @size-change="handleSizeChange" //页数改变时触发 @current-change="handleCurrentChange" //每页显示条数改变时触发 > </el-pagination> </div> </template> <script> export default { data() { return { total: 100, //总条数 pageSize: 10, //每页显示条数 currentPage: 1 //当前页数 } }, methods: { //页数改变时触发 handleSizeChange(val) { console.log(`每页 ${val} 条`); }, //当前页数改变时触发 handleCurrentChange(val) { console.log(`当前页: ${val}`); } } } </script> ``` 以上就是Vue2.0 + Element-ui2实现分页的基本步骤。你可以根据实际需求进行参数的调整和样式的修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值