vuex 实现getter值赋值给vue组件里的data示例
2019-11-06 07:04
2679 查看
通过watch将orderDetailsData对象赋值给data中的consignee对象,这样能将操作能避免v-model修改时,直接改动vuex中的值。
<template> <input type="text" placeholder="请输入收货人名字" v-model="consignee.name"> <input type="text" placeholder="请输入收货地址" v-model="consignee.address"> <input type="text" placeholder="请输入收货人手机号" v-model="consignee.mobile"> </template> <script> data () { return {consignee: {}} }, computed:{ ...mapGetters([ 'orderDetailsData', ]) }, watch: { orderDetailsData: { handler: function (val, oldVal) { this.consignee.name = val.consignee; //收货人名字 this.consignee.address = val.address; //收货人地址 this.consignee.mobile = val.mobile; //收货人电话 }, deep: true } } <script>
以上这篇vuex 实现getter值赋值给vue组件里的data示例就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- vue组件传递对象中实现单向绑定的示例
- 利用vue组件自定义v-model实现一个Tab组件方法示例
- Vue.js实现可排序的表格组件功能示例
- 一个Vue视频媒体多段裁剪组件的实现示例
- VUE实现一个分页组件的示例
- Vue实现的父组件向子组件传值功能示例
- Vue 组件(component)教程之实现精美的日历方法示例
- vue组件Prop传递数据的实现示例
- vue2.0使用swiper组件实现轮播的示例代码
- Vue.js使用-组件示例(实现数据的CRUD)
- vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
- 使用Vue父子组件通信实现todolist的功能示例代码
- vue实现的组件兄弟间通信功能示例
- Vue.js实现一个漂亮、灵活、可复用的提示组件示例
- vue实现组件之间传值功能示例
- Vue实现内部组件轮播切换效果的示例代码
- vue.js项目 el-input 组件 监听回车键实现搜索功能示例
- vue弹窗组件的实现示例代码
- Vue结合原生js实现自定义组件自动生成示例
- vue实现父子组件之间的通信以及兄弟组件的通信功能示例