佛系的发发 2020-11-24 16:10 采纳率: 100%
浏览 176
已结题

vux-proup包含的表单提交,再次打开弹窗,input输入框的值自动清空了,怎么保留输入框的值?

    <div class="itemBorder">
        <div class="prizeItem" v-for="item in prizeList">
          <div class="time" :style="{backgroundColor: theme.themeColorL}">{{formatTime(item.createTime)}}</div>
          <div class="prize" :style="{backgroundColor: theme.themeColorL}">{{item.pId__name}}</div>
          <div class="status" :style="{backgroundColor: theme.themeColorL}">{{formatStatus(item.status)}}</div>
          <div class="operation" :style="{backgroundColor: theme.themeColorL}">

            <!--打开领取地址填写弹窗-->
            <span v-if="item.status==0"  @click="Write(item.id)">领取</span>
            <span  @click="getPrizeDetail(item.id)">查看</span>
          </div>
        </div>
      </div>
    </div>
-------------------------------------------------------------------------------------
  <div v-transfer-dom>
      <popup v-model="show7" height="270px" is-transparent>
        <div style="width: 95%;background-color:#fff;height:300px;margin:0 auto;border-radius:5px;padding-top:10px;">
          <group>
            <x-input title="收件姓名" name="username" v-model="name" placeholder="请输入姓名" is-type="china-name"></x-input>
            <x-input title="手机号码" name="mobile" v-model="phone" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"></x-input>
            <x-textarea title="收件地址" v-model="address" :show-counter="false" :rows="1" autosize></x-textarea>
          </group>
          <div style="padding:5px 15px;">
            <x-button type="primary" @click.native="Sure">确定</x-button>
            <x-button @click.native="show7 = false">取消</x-button>
          </div>
        </div>
      </popup>
  </div>

------------------------------------------------------------------------------------
data(){
    return {
        phone: '',                   //测试领取电话号码
        address: '',   //测试领取奖品的地址
        name: '',
        show7: false,
    }
}

-----------------------------------------------------------------------------

Sure(){
        let pam = new FormData();
        pam.append("id", this.rowId);
        pam.append("take_msg", 
               `联系人:${this.name}, 联系电话:${this.phone}, 收件地址:${this.address}`);
        pam.append("token",  this.$store.state.token);
        let that = this;
        that.$axios.post("lott/front/takeOnline/", pam)
          .then((res) => {
            console.log(that.name);
            if (res.data.code == 0) {
              that.show7 = false;
              that.toastText = "提交成功,请等待发货通知";
              that.toast = true;
               /*打印的还是输入框的值,但是打开其他行的收货地址时,输入框是空的*/
              console.log(this.name);      
               /*刷新列表,这里并没有清空name,address,phone的操作*/
              setTimeout(that.refreshList, 1000);   
            } else {
              that.toastText =res.data.msg;
              that.toast = true;
              that.show7 = false;
            }
          })
      },
  • 写回答

1条回答 默认 最新

  • Aimior 2020-11-26 16:58
    关注

    <div v-transfer-dom> 外层加<keep-alive>

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退
  • ¥15 关于#python#的问题
  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥20 双系统开机引导中windows系统消失问题?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方
  • ¥15 关于生产日期批次退货退款,库存回退的问题