正确用法使用v-show控制input显示隐藏

<template>

    <div class="pay">

        <div v-show="false">

            <input type="text" v-for="(i, index) in Object.keys(listData)" :key="index" :name="i" v-model="listData[i]">

        </div>

    </div>

</template>

<script>

    data() {
        return {
          listData: {}
        }
    },

    async mounted() {
        try {
          let resp = await this.$axios.$post(payOrder, payData)

          let payload = JSON.parse(resp.payload)
          if (payload.errCode != 0) {
            this.$toast.fail({message: payload.errMsg})
            return
         }
         this.listData = payload.bizData
       } catch (e) {
          this.$toast.fail({message: '支付失败'})
      }
  },

</script>

如果想要让input框隐藏,不能使用<input type="hidden" />这样绑定值绑定不上去

<template>

    <div class="pay">

        <input type="hidden" v-for="(i, index) in Object.keys(listData)" :key="index" :name="i" v-model="listData[i]">

    </div>

</template>

<script>

    data() {
        return {
          listData: {}
        }
    },

    async mounted() {
        try {
          let resp = await this.$axios.$post(payOrder, payData)

          let payload = JSON.parse(resp.payload)
          if (payload.errCode != 0) {
            this.$toast.fail({message: payload.errMsg})
            return
         }
         this.listData = payload.bizData
       } catch (e) {
          this.$toast.fail({message: '支付失败'})
      }
  },

</script>

Logo

前往低代码交流专区

更多推荐