Как я могу установить и получить значение компонента ввода, используя Vue.js?

Question

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

Это прекрасно работает для установки начальных значений:

<template>
  <div class="editUserInfo">
    <input type="text" id="acName">
    <input type="text" id="acUsername">
    <input type="text" id="acEmail">
    <button v-on:click.prevent="updateInfo">Update</button>
  </div>
</template>

<script>
  data(){
    return{
      tokenExists: false,
      userCookie: {
        id: '',
        secret: '',
        expire_at: ''
      },
      newUserInfo: {
        nuName: '',
        nuUsername: '',
        nuEmail: '',
      },
      actualUserInfo: {
        acName: '',
        acUsername: '',
        acEmail: '',
      }
    }
  },
  methods: {
    checkToken(){
      if (this.$cookie.get('secret') == null){
        this.tokenExists = false;
      }else{
        this.tokenExists = true;
        var userInfo = JSON.parse(this.$cookie.get('secret'));
        this.id = userInfo.user_id;
        this.secret = userInfo.secret;
        this.expire_at = userInfo.expire_at;

        this.acName = userInfo.name;
        this.acUsername = userInfo.username;
        this.acEmail = userInfo.email;
    }
  },
  mounted(){
    document.getElementById("acName").value = this.acName;
    document.getElementById("acUsername").value = this.acUsername;
    document.getElementById("acEmail").value = this.acEmail;
  }
  ...
</script>

Однако мне нужно свойство v-model во входных компонентах, чтобы получить эти значения, когда я нажимаю кнопку. Когда я добавляю свойство v-model, значения инициализируются должным образом, но когда я тестирую компоненты, изменяя значения одного из них, другие входные компоненты очищаются.

Это не работает:

<template>
  <div class="editUserInfo">
    <input type="text" id="acName" v-model="newUserInfo.nuName">
    <input type="text" id="acUsername" v-model="newUserInfo.nuUsername">
    <input type="text" id="acEmail" v-model="newUserInfo.nuEmail">
    <button v-on:click.prevent="updateInfo">Update</button>
  </div>
</template>

Я думал, что это вопрос потери переменных, но я тестировал печать их в консоли, и они не менялись и не были определены.

Answer 1

Нет необходимости использовать document.getElementById, мы можем связать, используя раздел данных с v-моделью

<template>
  <div class="editUserInfo">
    <input type="text" id="acName" v-model="newUserInfo.nuName">
    <input type="text" id="acUsername" v-model="newUserInfo.nuUsername">
    <input type="text" id="acEmail" v-model="newUserInfo.nuEmail">
    <button v-on:click.prevent="updateInfo">Update</button>
  </div>
</template>

В вашей части сценария

<script>
  data(){
    return{
      tokenExists: false,
      userCookie: {
        id: '',
        secret: '',
        expire_at: ''
      },
      newUserInfo: {
        nuName: '',
        nuUsername: '',
        nuEmail: '',
      },
      actualUserInfo: {
        acName: '',
        acUsername: '',
        acEmail: '',
      }
    }
  },
  mounted(){
    this.newUserInfo.nuName = 'somevalue'
    this.newUserInfo.nuUsername = 'somevalue
    this.newUserInfo.acEmail = 'somevalue'
  }

В 'somevalue' укажите любое значение, которое вам нравится, а в методе checkToken() также используйте его как mount ().