vue中v-model直接绑定vuex中的状态属性遇到的问题

最新推荐文章于 2023-08-25 21:18:25 发布
最新推荐文章于 2023-08-25 21:18:25 发布
阅读量1.9k 收藏 6
点赞数 1
分类专栏： Vue日常总结 文章标签： 前端 javascript json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41880073/article/details/123234443
版权

vue中v-model直接绑定vuex中的状态属性遇到的问题

一、问题描述

最近做项目，遇到这样一个问题。我在vuex的state中保存了一个状态属性，当点击某一按钮的时候，改变其值，然后另一个组件也用到了这个属性，需要用v-model绑定，我就想着直接绑定用v-model = 'this.$store.state.xxx',结果报错了，说这个属性没有定义。错误的代码
在这里插入图片描述

二、问题解决

上面之所以报错的原因是因为

v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化。

说的简单点v-model是和组件的data打交道的，现在直接绑定了vuex中的state的属性，会导致出错。

所以解决办法就是在组件的computed计算属性中，将这个vuex中state的属性先保存下来，然后再绑定给v-model

正确的代码
在这里插入图片描述
在这里插入图片描述

丑小鸭变黑天鹅
关注
专栏目录
当 Vuex 遇上 v-mdel
qq_45050686的博客
11-22 476
vuex、v-model
浅谈Vue当中的绑定，包括属性绑定（v-bind，v-model）和事件绑定（v-on），和它们之间的区别
m0_61768030的博客
01-06 1222
给元素绑定事件监听器。当用于普通元素，只监听原生 DOM 事件。当用于自定义元素组件，则监听子组件触发的自定义事件。（注意：自定义事件是组件通信的内容，我们另外再系统讲！当监听原生 DOM 事件时，方法接收原生事件作为唯一参数。如果使用内联声明，声明可以访问一个特殊的$event。v-on还支持绑定不带参数的事件/监听器对的对象。请注意，当使用对象语法时，不支持任何修饰符。动态的绑定一个或多个 attribute，也可以是组件的 prop。（源于vue文档）（注意：那我们这里主要讲。
Vue中v-model如何和Vuex结合起来
潘秋娜的博客
03-25 2395
我的input框v-model绑定的是Vuex里的state，但是没有做到双向绑定。今天就聊一下如何优雅的绑定Vuex 第一种 <div> <input type="text" v-model="$store.state.Root.value" /> <p>{{ $store.state.Root.value }}</p> // 这里为什么是state.Root.value 是我这里用到了vuex里.
v-model绑定vuex的state
cccbbbmmm的博客
08-25 672
第一种方法：直接 给 <input> 中绑定 value，然后侦听 input 或者 change 事件，在事件回调中调用一个方法通过 commit 方法委派给 mutation 执行来修改 Vuex 中的数据。在Vue中，我们可以使用"v-model"指令将表单元素的值和Vue实例的数据进行双向绑定。在计算属性或者方法中使用Vuex的commit方法或者dispatch方法来触发相关的mutations或者actions。在组件中使用计算属性或者方法，将本地的data属性和Vuex的state进行关联。
v-model动态选取绑定的属性
商朝
05-06 2401
需求： 根据前一个表单项用户选取的值，动态选择后面的表单项应该绑定哪个属性。比如前者选了1，那么后者绑定formObj.stu,选2，后者绑定formObj.tea 坑 那么针对这个场景我们第一个想法肯定是三目,你肯定会写出如下的代码 <el-input :v-model:'formObj.xx == 1?this.formObj.stu':'this.formObj.tea'> </el-input> 恭喜你，这么些不生效。因为vue有自己的规则针对v-model是不允许使用表达
vuex中获取的数据使用v-model绑定出问题
weixin_34291004的博客
09-08 543
get selectedProp() { return this.$store.state.selectedProp; } 获取的数据selectedProp直接绑定在表单元素上会有错，因为不能直接对vuex里面的数据进行更改 　　　　　　<el-radio-group v-model="selectedProp"> &lt...
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
10-17
在这个示例中，使用了Vue.js的实例来定义数据模型，并通过v-model指令将input元素的值与数据模型中的msg属性绑定在一起。当用户在输入框中输入文本时，数据模型中的msg属性会相应地更新；而当msg属性的值发生变化时...
vue-deepset-在Vue 1.x和2.x中使用v-model与Vue / Vuex对象/状态中的深层嵌套字段进行交互-Vue.js开发
05-27
vue-deepset使用动态路径对Vue...兼容Vue 1.x，Vue 2.x，Vuex 1.x和Vuex 2.x注意如果浏览器支持vueModel和vuexModel使用代理对象，并且回退到具有基于目标对象生成字段的对象。 因此，始终最好在使用时预定义对象的属性
vuex-bound:Vue状态和突变的Vue双向绑定（v-model）
04-28
Vue双向绑定（v-model），用于Vuex状态和突变。 安装及使用 $ npm i vuex-bound -S # or $ pnpm i vuex-bound -S # or $ yarn add vuex-bound // for commonjs const { mapModel , updateModel } = require ( '...
VueX中使用辅助函数在进行v-model 绑定数据报错
大家都在努力！你怎能不努力！！！
04-15 561
当你在使用Vuex的state中的状态时，在Vue中使用了v-model绑定数据报错。
Vuex 使用 v-model 配合 state的方法
10-17
主要介绍了Vuex 使用 v-model 配合 state的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
在严格模式下使用Vuex时，v-model赋值vuex会报错
frank_hehe的博客
04-13 923
在严格模式下使用Vuex时，在v-model属于Vuex的状态下使用可能会有些棘手： <input v-model="obj.message"> 假设obj是一个计算属性，该属性从商店返回一个Object，则当用户键入输入内容时，v-model此处将尝试直接进行更改obj.message。在严格模式下，这将导致错误，因为在显式Vuex变异处理程序中未执行变异。 处理它的“ Vuex方...
【Vue】$store不能通过v-model绑定修改数据
Shino_jie的博客
06-19 998
Vuex 强调的是 Unidirection Dataflow， state 只能被读取，要写入 state 必须靠 mutation ，因此 v-model 无法直接写入 state 。v-model 本质是 value property binding 与 input event 的 syntatic sugar，因此可以回归基本动作，使用 value 与 input 实现。对store使用双向绑定会出现下面的情况解决办法：使用计算属性...
vuex(mapActions+mapGetter)配合v-model处理数据
Xu_cipu的博客
01-19 772
业务场景： elementui中的el-checkbox绑定的数据为一个存储在vuex当中的数据 // template <el-checkbox v-model="showBasicData"></el-checkbox> 一开始，本来尝试直接用mapGetters中返回的getter作为数据源，类似如下形式： computed: { ...mapGetters([ 'showBasicData' ]) } 但，会报错： Computed property “XX” w
当v-model遇上vuex时报错
cyyy1223的博客
08-09 3438
场景：当我们v-model的数据是存储在vuex中时写法如下时会报错 computed:{ editableTabsValue2:{ return this.$store.state.activeName } } 报错：Computed property  "editableTabsValue2"  was assigned  to but  it has no  sett...
vuex表单处理：input绑定state数据的方法(v-model优化)
07-19 1051
在输入框打字,标签"结果:"就更新显示[输入框里面的内容] 构建store: //store/index.js import Vue from 'vue' import Vuex from "vuex" Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0, }, mutations: { add(state,num) { state.count=num } }, }) export default .
vuex数据与组件内表单实现v-model 实时同步
sf4928579的博客
03-10 1013
解决vuex数据 与 组件表单 v-model 遇到的问题
Vue中Vuex的数据显示会根据model绑定而改变显示？
Anchor
08-15 788
在公共组件 A中使用Vuex的数据： <div class="user-info" v-if="userorno"><router-link to='/personalCenter'> 你好哇！{{$store.getters.getStorage.uname}}</router-link> ...
vue常遇错误 v-mode 双向绑定问题
AKM5201314的博客
05-08 1795
项目场景： 在我们实际开发的过程中,程序有bug是经常有的事情： 例如：vue 中 v-model的双向绑定问题 问题描述 例如：写好的个人信息表单提交页面,虽说输入框可以输出文本,但是浏览器调试模式下的console里面会有报错的提示 示例: <template> <view> <input v-model="abs" /> </view> </template> <script> export default {
vue3怎么v-model绑定数组类型
最新发布
09-25
在 Vue3 中，如果你想要绑定一个数组类型的值，并通过 `v-model` 实现双向数据绑定，可以采取以下几种方式： 1. **mapGetters 和 mapActions**：如果你使用的是Vuex，可以在store中定义一个计算属性并使用 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值