本文實現的是點擊單一規格和多規格兩個按鈕會在頁面顯示不同的表單

方法一

<!-- 單規格和多規格的切換 -->
<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>