通过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>

 

 

Logo

前往低代码交流专区

更多推荐