如何使用vue提交预填充的表单

Question

我试图创建一个表单来更新用户信息，所以我将从API中获得的当前用户数据预先填充表单，然后我的计划是发送修改后的表单来更新用户信息，下面是我的代码

<template>
  <div class="body">
    <h1 class="mt-3">{{ msg }}</h1>
    <b-row class="mt-1">
      <div class="cards mx-5 mb-5">
        <b-card
          v-for="item in pets"
          :key="item.id"
          :title="item.dog_name"
          tag="article"
          style="max-width: 17rem;"
          class="text-center"
        >
          <b-form @submit.prevent="updateMascota" class="pl-4">
            <b-form-group id="input-group-1" label="Nombre:" label-for="input-1">
            <b-form-input
              id="input-1"
              v-model="item.proposedPetName"             
              required  
              readonly         
            >          
            </b-form-input>
            </b-form-group>
            <b-form-group
            id="input-group-2"
            label="Raza:"
            label-for="input-2"
            >
            <b-form-input
              id="input-2"
              v-model="item.proposedPetRace"
              required
            >
            </b-form-input>
            </b-form-group>

            <b-form-group
            id="input-group-3"
            label="Altura en cm:"
            label-for="input-3"
            >
            <b-form-input
              id="input-3"
              v-model="item.proposedPetHeight"
              required
              min="0"
            >
            </b-form-input>
            </b-form-group>

            <b-form-group
            id="input-group-4"
            label="Peso en Kg:"
            label-for="input-4"
            >
            <b-form-input
              id="input-4"
              v-model="item.proposedPetWeight"
              required
              min="0"
            ></b-form-input>
            </b-form-group>

            <b-form-group
            id="input-group-4"
            label="Edad en años:"
            label-for="input-4"
            >
            <b-form-input
              id="input-4"
              v-model="item.proposedPetAge"
              type="number"
              min="0"
              required
            ></b-form-input>
            </b-form-group>

            <b-form-group
            id="input-group-6"
            label="Algo mas?:"
            label-for="input-6"
            >
            <b-form-textarea
              id="input-6"
              v-model="item.proposedPetNotes"
             rows="3"
              max-rows="6"
            >
            </b-form-textarea>
            </b-form-group>
           <b-button block pill type="submit" variant="success">
            Actualizar datos</b-button>
           </b-form>    
        </b-card>        
      </div>
    </b-row>
    <div>
  </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "DogsComponente",
  data() {
    return {
    currentUser: {},
    pets:[],
    proposedPetName:"",
    proposedPetRace:"",
    proposedPetHeight:"",
    proposedPetWeight:"",
    proposedPetAge:"", 
    proposedPetNotes:"", 
    }
  },
  props: {
    msg: String,   
  },
  methods: {
    getMascotas(){
      this.$store.dispatch("getMascotaById", {
          cadena: this.currentUser.user
          });
    },
    updateMascota() {      
      this.$store.dispatch("updateMascota", [{
      dog_name: this.proposedPetName,
      dog_race: this.proposedPetRace,
      dog_height: this.proposedPetHeight,
      dog_weight: this.proposedPetWeight,
      dog_age: this.proposedPetAge,
      dog_notes: this.proposedPetNotes,
      }, "pets"])
      .then(({ data }) => {
          if (data === "") {
            alert("Error al actualizar datos");
          } else {
            alert ("Has actualizado tus datos")
            location.reload();
          }
        });
    }
  },
  created() {
    if (localStorage.getItem("pet")) {
      try {
        this.pets = JSON.parse(localStorage.getItem("pet"));
        this.proposedPetName = this.pets.dog_name
        this.proposedPetRace = this.pets.dog_race
        this.proposedPetHeight = this.pets.dog_height
        this.proposedPetWeight = this.pets.dog_weight
        this.proposedPetAge = this.pets.dog_age
        this.proposedPetNotes = this.pets.dog_notes
      } catch (e) {
        localStorage.removeItem("pet");
      }
    }
    if (localStorage.getItem("user")) {
      try {
        this.currentUser = JSON.parse(localStorage.getItem("user"));
      } catch (e) {
        localStorage.removeItem("user");
      }
    }
    this.getMascotas();
  },
};
</script>

<style lang="scss" scoped>
h1 {
  color: #40db9a;
}
.body {
  margin: 0;
  height: auto;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cards {
  display: flex;
}
.card {
  color: #063869;
  background-color: #eef6e1;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 3px 3px 12px 2px rgba(black, 0.6);
  transition: 0.2s;
}
.card:not(:first-child) {
  margin-left: -2rem;
}
.card:not(:last-child):hover,
.card:not(:last-child):focus-within {
  transform: translateY(-1rem);
  ~ .card {
    transform: translateX(2rem);
  }
}
</style>

正如您所看到的，我用currentUser信息预填充了表单，问题是当我想发送数据时，数据都是空字符串，而不是预填充或更改的值，我很确定这部分是错误的

Answer 1

首先，同时设置一个v-model和一个:value是相互矛盾的，因为(根据Vue的文档) v-模型只是在:value之上的语法糖。

相反，我采用了设置中间数据值的方法。为了简化示例，我只将演示一个这样的字段。在这种情况下，它是proposedClientEmail...

<template>
  <b-form @submit.prevent="updateUsuario" class="pl-4">
    <b-form-group id="input-group-1" label="User ID:" label-for="input-1">
      <b-form-input
        id="input-1"  
        :v-model="proposedClientEmail"
        required           
      >
      </b-form-input>
    </b-form-group>

    <b-button block pill type="submit" variant="success"
      >Actualiza tus datos</b-button
    >
  </b-form>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "UpdateClient", 
  data() {
    return {
      currentUser: {},
      proposedClientEmail: ""
    };
  },
  methods: {
    updateUsuario() {
      this.$store.dispatch("updateUsuario", [{
        client_e_mail: this.proposedClientEmail
      }, "clients"])
    },
  },
  created() {
    if (localStorage.getItem("user")) {
      try {
        this.currentUser = JSON.parse(localStorage.getItem("user"));
        this.proposedClientEmail = this.currentUser.clientEmail
      } catch (e) {
        localStorage.removeItem("user");
      }
    }
  }
};
</script>