Vue - set default value to input text

Question

I'm loading a Vue component which should render a basic form. I'm trying to set the input to have a default value, but for some reason nothing shows. Here is what i tried:

<template>
    ...
    <input type="text" value="0.02" class="form-control" v-model="amount">
    ...
</template>

Why does nothing show into the input field? Is it because Vue doesn't support it or i need to use something else? Thanks in advance

iiSam · Accepted Answer · 2020-12-31 18:36:29Z

7

The reason why you don't have a default value, is that this value is overwritten by the

v-model = "amount"

In order to set a default value, it would be better to set the value of amount in the returned vue data object. You will have something like :

data:  () => {
return {
  amount: 0.02 // Your default value
 }
}

…

edited Dec 31, 2020 at 18:36

answered Dec 31, 2020 at 13:52

iiSam

815 bronze badges

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

1 Comment

JayK23 Over a year ago

Indeed. I needed to set it from inside return {}. Thanks a lot

Majed Badawi · Accepted Answer · 2020-12-31 13:51:33Z

2

The default value is set in data as follows:

new Vue({
  el:"#app",
  data() { return { amount: "0.02" } }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" class="form-control" v-model="amount">
</div>

answered Dec 31, 2020 at 13:51

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Collectives™ on Stack Overflow

Vue - set default value to input text

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related