v-model与vuex数据绑定传值赋值取值
日期:2020-05-29
来源:程序思维浏览:3125次
最近开发点餐系统的项目,由于考虑到代码的可维护性,需要用到vuex的异步数据流,在填写表单的时候,需要用input的v-model直接绑定到vuex的store数据:
<template>
<div>
<el-row class="age">
<el-col :span="3">
<div class="el-input__inner agestart">
<el-checkbox v-model="changeValue">年龄</el-checkbox>
</div>
</el-col>
<el-col :span="4">
<el-input type="number" v-model="content" placeholder="开始年龄"></el-input>
</el-col>
<el-col :span="2">
<div class="el-input__inner ageto">
to
</div>
</el-col>
<el-col :span="4">
<el-input type="number" v-model="contentend" placeholder="结束年龄"></el-input>
</el-col>
</el-row>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name:'Age',
computed:{
changeValue:{
get(){
return this.$store.state.changeValue
},
set(v){
this.$store.commit("changeMy",v)
}
},
content:{
get(){
return this.$store.state.startAge
},
set(v){
this.$store.commit('changeMoney',v)
}
},
contentend:{
get(){
return this.$store.state.endAge
},
set(v){
this.$store.commit('changeEndAge',v)
}
}
}
}
</script>
<style lang="stylus">
</style>
- 上一篇:node发送邮件功能
- 下一篇:前端面试必会JavaScript数据结构与算法
精品好课