props传过来的值赋值给data 不起效，而v-model也监听不到

最新推荐文章于 2024-05-02 17:10:35 发布
最新推荐文章于 2024-05-02 17:10:35 发布
阅读量1.8k 收藏
点赞数
文章标签： 前端 vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46583805/article/details/123628976
版权
本文探讨了在Vue应用中使用axios获取数据并存储在shopList数组中，实现购物车全选功能遇到的问题。作者指出，当商品状态通过Array.every()检查全选时，Footer组件的全选框应当同步选中。由于Vue不直接允许修改props的值，作者将props值存储在ischeck中，并使用v-model控制全选框状态。然而，初始加载时，全选状态(v-model绑定的allChecked)并未正确赋值。为解决此问题，作者添加了侦听器监听allChecked变化，但这仅是临时解决方案，页面刷新时allChecked仍为false。文章寻求对这一问题的深入理解，期待社区专家的解答。

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

需求是这样的：

用vue实现购物车的功能，父组件App保存着axios过来的数据，把数据存到数组shopList中，Footer组件里面有个全选框，如果每个商品状态都被选中（我已经用Arry.every() 把shopList的商品选中状态遍历），则这个全选框就被选中。

 

首先利用props把每个商品的选中状态传给子组件Footer,因为我Footer组件的样式是用的是vant组件库写的,复(全)选框是否选中是用v-model控制

因为不能直接修改props的值嘛 所以我把props传过来的值转存到 ischeck 中

 但是当我打开页面和vue调试工具时，this.allChecked 是没赋值到 ischeck 的 ，这就说明 当商品的状态没有被全部选中时，而全选状态是被选中的。

最后添加了一个侦听(侦听allChecked的变化)解决了问题,但其实没完全解决问题，其实页面一刷新allChecked还是false，只不过我监听了他，然后再进行进一步操作，我就是不知道为什么props的值赋值到 ischeck 上，而 v-model 监听不到(我也不知道什么原因，有知道的大佬麻烦指点一二，谢谢)

 

 

v-model源码深入解析(超详细)
r1211111的博客
11-19 3593
抛出问题 我们先来看一下下面这段代码 <template> <div> <div class="message">{{ info.message }}</div> <div><input v-model="info.message" type="text"></div> <butt...
父子组件分页的的props传递，如何把props中的值保存到data中
weixin_46463984的博客
09-13 2272
父子组件分页的的props传递 在封装一些组件的同时可能会夹杂着分页组件一起封装，这就面临一个问题，关于每次分页的当期页面的最新值，如何在父子组件中传递的问题。我也是最近开发遇到的困难，由于对vue的熟悉程度不够，网上的答案有时并不能解决值传递的问题。再次做一个关于父子组件分页的的props传递记录。以便帮助更多新学习vue的小伙伴参考。 基本的父子组件通信，父传子 父组件定义一组数据或单个数据，在引用子组建的时候传递值 使用 v-bind: 动态绑定 子组件使用props接收。 基本的父子组件通信，
Vue中用props给data赋初始值遇到的问题解决
10-17
主要介绍了Vue中用props给data赋初始值遇到的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中prop传值获取不到值
weixin_44766633的博客
03-31 2503
在使用prop传值时，父组件传值到子组件，子组件拿不到值得情况下。 解决办法：将prop传到子组件的值转换为本地的值 具体如下： 子组件中的代码： props: { curlData: { type: Object } }, watch:{ curlData(){ this.realData =this.curlData } }, watch中的函数名使用prop的变量名称，watch监控字段值得变化，相当于在此处监听curlData值得变化。
解决 vue中props值无法赋值给data域的问题
热门推荐
12-04 1万+
vue 中父组件向子组件传递数据用 props, 但是子组件是无法修改它的。如果子组件需要动态修改它就只能自造一个对应的 data 域。比如 &lt;!-- --&gt; &lt;template&gt; &lt;div&gt;这里是汇总信息 &lt;ul&gt; &lt;li&gt;{{total}}&lt;/li&gt; &l...
父传子通过props接受传值给data，直接this.[props的值]无效
qq_41318006的博客
04-06 404
props: { title: { type: Stinng, default: '' }, }, data() { return { myTitle: this.titile } } watch: { title(val){ this.myTitle = val; } }
vue中props传值给data时-props有值但data却是空的问题
吕大瓜的博客
11-12 1万+
问题 设计vue组件时，常常有这样一个应用场景：父组件通过接口请求回来的数据传给子组件， 然后在子组件内部我们会用一个props来接收，并且将该props赋值给data里面的一个变量（便于我们后期对这个数据操作，如果直接修改props，vue会报错） 这样会有一个问题，就是组件接受到的props是有值的，但是赋给data里面的变量却是空的。 子组件 props: { title: {...
vue自定v-model实现表单数据双向绑定问题
10-18
在上面的代码中，`$event.target.value`获取的是输入框的新值，然后将其赋值给`price`，从而完成了数据的反向同步。 **自定义`v-model`实现**： Vue也允许我们自定义`v-model`，这在创建可复用的自定义组件时非常...
详解vue 自定义组件使用v-model 及探究其中原理
10-16
当v-model应用到自定义组件上时，原理也类似，只不过需要子组件显式定义一个名为`value`的prop，然后在子组件内触发input事件时，将值作为参数直接传给父组件。这样父组件就可以在自己的v-model绑定的变量上更新值了...
详解vue v-model
10-14
`set`方法则用于在输入框中键入内容后，将值转换为trim后的文本并赋值给`message`。 4. 使用v-model与组件在Vue中，自定义组件也可以使用`v-model`进行数据绑定。这使得组件可以方便地与其他组件或父组件进行交互。...
父组件传值到子组件 props 子组件data未变化
u012174809的专栏
01-05 1936
到底是什么问题呢，一句话说不清，见图就明白了。 父组件 index.vue <player :play-type.sync="playType"></player> 子组件player.vue props: { playType: { type: String, default: 'video/mp4' } }, data() { return { type: this.playType,
父子组件传值--父组件使用v-model，子组件接收问题？
SM_Cute的博客
04-04 2129
父子组件传值--父组件使用v-model，子组件接收问题？
vue2的v-model不更新
sfumato的博客
03-23 917
动态生成组件时，动态为表单添加属性，同时使用v-model以数组形式访问表单属性。通过监听表单对象，发现并未实施更新。
Vue Cli4.5x版本，v-model绑定组件指令，子组件无法直接访问:value，和通过input修改
qq_41411483的博客
08-20 818
本人直接上手了脚手架4.5版本，它的挂载方式是 createApp(App).use(store).use(router).mount('#app') 所以发现这个版本devtools打不开，有大佬懂得如何配置可以评论告诉我，感谢！ 所以也无法确切知道新版本下v-mind传递原理， 以往我们都知道（如下父组件中Template某部分） <component v-model="text"></component> <component :value="text" @
vue：使用父组件通过props传到子组件的值
1111111111
11-23 844
1、首先，我们要在父组件中给子组件的props赋值 如果子组件只是需要在template里显示一下传过来的值，直接用{{}}就可以了。 但是，如果需要在script里使用传过来的值，（也就是我们要用到this啦）那么在父组件中赋值的时候就必须精确到属性一一赋值，如下图。 然后在子组件的我们再定义一个变量，在watch里来接收传过来的值，并且这个新变量只有在watch里才有效！（this.initChart();原来是放在mounted里面调用的，这时候要移到watch里去，因为我在...
vue3的v-model
m0_54570434的博客
04-21 849
父 <template> <div> <!-- v-model 没有指定参数名时，子组件默认参数名是modelValue --> <ChildComp v-model="search" /> <h1>{{ search }}</h1> </div> </template> <script> import { ref } from 'vue' import Chil
vue中父组件给子组件传递数据失败的问题
weixin_69338588的博客
05-02 744
在vue2中，父组件给子组件传递数据，子组件通过props来接收。此时只需要给proList加个类型判断即可。此时针对proList会报错。页面也可以正常渲染出来。
vue 如何在循环中 “监听“ 的绑定v-model数据
xiawenyi1234的博客
06-22 3020
1.普通属性的值进行监听 vue中提供了一个watch方法，它用于观察vue实列上的数据变动，来响应数据的变化。 下面我们来分别学习下使用watch对对象的属性值进行监听，有如下几种，普通属性的监听，对象的属性值的监听。最后一种就是对input中的v-modle的动态数组的数据属性进行监听，最后一种不是使用watch来监听，本文的重点是最后一种的实现。在项目中会经常碰到使用v-model监听数据的。 <!DOCTYPE html> <html> <head> .
4. Vue 监听子组件(v-model方式)
白怀宇的博客
06-13 860
Vue 监听子组件(v-model方式) 1 缺点：只能实现1个数据的绑定 <div id="app"> <input-mod v-model="inputVal"></input-mod> <div>{{ inputVal }}</div> </div> Vue.component('input-mod', { props: ['value'], template: ` <div>
v-model绑定的值不一样
最新发布
01-25
当遇到 `v-model` 的绑定值与界面显示不一致的情况时，通常是因为数据的变化未能被Vue正确检测到。以下是几种常见的解决方法： #### 方法一：确保属性已预先声明 为了使 `v-model` 双向绑定生效，在初始化 Vue 实例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向KaiSarH学习

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值