Vue.js динамическая привязка v-модель и значение

Question

Я использую django-rest-framework + vue.js

Моя цель - создать форму для редактирования профиля пользователя.

Вот что у меня есть:

<input type="email" v-model="userEdit.email">
<input type="text" v-model="userEdit.location">
<input type="text" v-model="userEdit.bio">

мои входы привязаны к объекту данных "editUser"

data() {
  return {
    'editUser': {
      email: '',
      location: '',
      bio: '',
      image: '',
    },
  }
},

так что теперь я могу отправить этот объект на сервер и изменить информацию профиля пользователя.

sendChanges() {
  const fd = new FormData();
  fd.append('image', this.editUser.image, this.editUser.image.name)
  fd.append('email', this.editUser.email)
  fd.append('location', this.editUser.location)
  fd.append('bio', this.editUser.bio)
  this.axios.put(userDetailURL + this.routeUser, fd)
    .then(response => {
      console.log(response)
    })
    .catch(error => {
      console.log(error.response)
    })
},

эта форма работает и обновляет информацию, но есть вещь, которая мне не нравится:

Поля ввода всегда пусты, и пользователь должен заполнить их все, прежде чем сможет нажать кнопку сохранения.

даже если пользователь хочет изменить только «местоположение», он должен заполнить другие пустые поля ввода.

добавление динамического :value="userDetail.email" к входу - не работает.

есть ли другой способ добавить текущее значение в поле ввода и при этом иметь v-модель? текущие данные здесь:

computed: {
      userDetail() {
        return this.$store.getters.userDetail;
      },
    },

Answer 1

Проблема в том, что вы привязываете значения в data к форме, и эти значения изначально пусты.

Самое чистое и простое решение, о котором я могу подумать сейчас, - это обновить исходные данные в mounted ловушке жизненного цикла :

mounted () {
  // Use Object.clone to prevent modifying the userDetail object directly
  this.editUser = Object.clone(this.$store.getters.userDetail)
}

Однако есть и другие решения. Вы можете использовать вычисляемый установщик , чей метод получения по умолчанию равен тому, что находится в хранилище, но может быть переопределено при установке.