how to set value to input field in vuejs

Question

<div class="col-md-8">
    <va-input label="Address 1"
        v-model="Address1"
        id="address"
        class="inp">
    </va-input>
</div>

below i am calling api to get data. after getting i need to set value to above input field.

document.getElementById("address").value =res.data[0].address1,

but the above code is not working.

Change the model value Address1 and not by directly manipulating dom. Ex: this.Address1 = res.data[0].address1 — ambianBeing
– ambianBeing, Commented Dec 19, 2019 at 8:03
Pavan, do you have the Address1 variabled in the data field? — Jesper
– Jesper, Commented Dec 19, 2019 at 8:26

tony19 · Accepted Answer · 2022-07-15 01:48:18Z

1

Try using the ref property, see here: https://v2.vuejs.org/v2/api/#ref Basically would look something like:


    <va-input label="Address 1"
              v-model="Address1"
              id="address"
              class="inp"
              ref="inputRef"
    >
         </va-input>
    ...
    this.$refs.inputRef.$el.value = ...

You may need to dig a little into the structure but from the $el you can access the element.

edited Jul 15, 2022 at 1:48

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 19, 2019 at 8:03

Michael

5,1588 gold badges37 silver badges60 bronze badges

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

1 Comment

Michael Over a year ago

console log the $el and see exactly where you are, then target the child element you need

Jesus · Accepted Answer · 2019-12-19 09:53:47Z

0

You need to add this data to the "data" of the component, just create :

`data() {
    return {
        Address1: ''
    }
}`

and at the created() or anywhere you want to assign this value : this.Adress1 = res.data[0].address1

Basically this is the vue way of doing these kind of things,and using the v-model properly.

answered Dec 19, 2019 at 9:53

Jesus

1692 silver badges9 bronze badges

Collectives™ on Stack Overflow

how to set value to input field in vuejs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related