vuex 绑定表单,多个输入框的解决办法

摘抄:https://segmentfault.com/a/1190000012299511
摘抄2: http://shzhangji.com/cnblogs/2018/04/18/form-handling-in-vuex-strict-mode/
<template>
  <form @submit.prevent="update(user)">
    <ul>
      <li><label>Name:</label><input type="text" name="name" placeholder="name" v-model="user.name"/></li>
      <li><label>Age:</label><input type="number" name="age" placeholder="age" v-model="user.age"/></li></li>
      <li>
        <input type="radio" name="gender" value="male" v-model="user.gender"/>
        <label>male</label>
        <input type="radio" name="gender" value="female"  v-model="user.gender"/>
        <label>female</label>
      </li>
      <li>
        <button>Cancel</button>
        <button @click.stop.prevent="update(user)">Submit</button>
      </li>
    </ul>
  </form>
</template>

<script>
  import _ from 'lodash'
  import { mapMutations } from 'vuex'
  import * as types from '@/store/mutation-types'
  export default {
    created () {
      this.user = _.cloneDeep(this.$store.state.user)
    },
    data () {
      return {}
    },
    methods: {
      ...mapMutations('user', {
        update: types.UPDATE_USER
      })
    }
  }
</script>
<style scoped>
  li {
    text-align: left;
    padding: 8px 0;
  }
  label {
    width: 100px;
  }
</style>

posted @ 2020-04-08 15:15  山村码农  阅读(1024)  评论(0编辑  收藏  举报