当前位置：首页 > ds >正文

vuex实现同一页面radio-group点击不同按钮显示不同表单

ds 2025/7/17 13:03:01

本文实现的是点击单一规格和多规格两个按钮会在页面显示不同的表单
在这里插入图片描述

方法一

<!-- 单规格和多规格的切换 -->
<el-form label-width="80px" class="text-align-left"><el-form-item label="商品规格"><!-- 监听skus_type的改变 --><el-radio-group :value="skus_type" size="mini" @input="vModel({key: 'skus_type',value: $event})"><el-radio-button :label="0">单一规格</el-radio-button><el-radio-button :label="1">多规格</el-radio-button></el-radio-group></el-form-item>
</el-form><template v-if="skus_type === 0"><el-form label-width="80px" class="text-align-left">表单一</el-form>
</template><template v-if="skus_type === 1"><el-form label-width="80px" class="text-align-left">表单二</el-form>
</template>

表单中的数据都由vuex统一管理，因此需要创建store/index.js（store的总文件）和store/modules/goods_create.js（存储本goods_create页面的数据和方法）两个页面，详细步骤参考上一篇博客，本文将基于两页面已正确创建且运行无报错的情况下进行。

在goods_create.js文件中：
注意必须启用命名空间，且与state同级，不然会报错

export default {namespaced: true,  // 必须添加这行来启用命名空间state: {skus_type: 0,//商品规格},mutations: {// 修改statevModel(state,{key,value}){state[key] = value;    },}，
}

在create.vue文件中
引入mapMutations
解构方法
注意添加’goods_create’，是在store/Index.js中导入时的方法名
…mapMutations(‘goods_create’,[‘vModel’]),

<script>
// 解构vuex
import { mapState, mapMutations } from 'vuex';export default {computed: {...mapState('goods_create', {skus_type: state => state.skus_type,}),},methods: {// 修改state...mapMutations('goods_create',['vModel']),}
}
</script>

在语句中触发
radio-group属于element-ui的封装好的方法，需要用input触发，用change触发会报错

<!-- 监听skus_type的改变 -->
<el-radio-group :value="skus_type" size="mini" 
@input="vModel({key: 'skus_type',value: $event
})"><el-radio-button :label="0">单一规格</el-radio-button><el-radio-button :label="1">多规格</el-radio-button>
</el-radio-group>

方法二

在goods_create.js中创建一个新的方法

  // 修改state方法二vModelState(state,{key,value}){state[key] = value;    },

在create.vue中传入vModelState方法，并修改vModelState的数据

  // 修改state方法二...mapMutations('goods_create',['vModelState']),// 修改表单的值vModel(key,value){this.vModelState({key,value})}

触发
触发方法比方法一简洁

 <el-radio-group :value="skus_type" size="mini" @input="vModel('skus_type',$event)"><el-radio-button :label="0">单一规格</el-radio-button><el-radio-button :label="1">多规格</el-radio-button></el-radio-group>