I am new to vuejs and nuxtjs and at my pany they are using vuetify. I need to set default value as 0 to v-text-field fields in the application but I cant find the to do so in the vuetify doc.

I am new to vuejs and nuxtjs and at my pany they are using vuetify. I need to set default value as 0 to v-text-field fields in the application but I cant find the to do so in the vuetify doc.

• javascript
• vue.js
• nuxt.js
• vuetify.js

Share Improve this question Follow asked May 12, 2022 at 21:43 Maninder KaurManinder Kaur 3122 silver badges55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can provide the default value 0 on the actual property bound to v-model from data object itself. <v-text-field> is just a wrapper around an html <input>. Hence, it will bind the data in same way how we are binding for input.

Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    textFieldValue: 0,
  })
})

<link href="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
    <v-text-field v-model="textFieldValue"/>
  </div>
</div>

You can use the v-model directive and just set the default value to 0 in your data property. Example: <v-text-field v-model="textField" label="My Text Field/> and in your data: data: () => ({ textField: 0, })

Hope it's the right answer, cheers