How can I set and get the value of an input component using Vue.js?

Question

I'm trying to set an initial value to some input components when created and then, after clicking a button, get those values if they are changed.

This works fine to set the initial values:

<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>

However I need the v-model property in the input components to get those values when I click the button. When I add the v-model property the values are initialized properly but when I test the components by changing the values of one of them, the other input components are cleared.

This is not working:

<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>

Thought that was a matter of losing the variables but I tested printing them in console and they are not changing or being undefined.

Answer 1

No need to use document.getElementById we can bind using data section to 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>

In your script part

<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'
  }

In 'somevalue' give what ever value you like and in method checkToken() also use it like mounted()