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.

where is the newUserInfo that you binded in v-model in script part where you declared it — Abinesh Joyel
– Abinesh Joyel, Commented Apr 24, 2018 at 7:12
Done. Now that made me think that it's because the binding variables have an undefined value. I've just modify one of them with an static value and it worked, the input didn't cleared. Now the question is how can I set the values to the variables in the data section so that they don't stay undefined? — Andres Concha
– Andres Concha, Commented Apr 24, 2018 at 7:59
no need to use document.getElementById we can bind using data section to v-model — Abinesh Joyel
– Abinesh Joyel, Commented Apr 24, 2018 at 8:12

Abinesh Joyel · Accepted Answer · 2018-04-24 08:18:46Z

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

answered Apr 24, 2018 at 8:18

Abinesh Joyel

2,0932 gold badges17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andres Concha Over a year ago

Solved! Thank you so much!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related