CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Reo93
Reo93

Reputation: 229

How to set default value on dynamic input fields in Vue.js?

I have created a dynamic input fields but the problem is that I don't know how to set default values on that dynamic fields for example number "1". Can anyone help me with that? Thanks

Here is my example

new Vue({
  el: '#app',
  data: {
    result: [],
    array: [{
    	id: 1
    }, {
    	id: 2
    }, {
    	id: 3
    }]
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(item, index) in array" :key="item.id">
    <input type="number" :id="item.id" v-model="result[index]">
    <br>
  </div>
  <span>Result: {{ result }}</span>
</div>

Upvotes: 0

Views: 8734

Answers (2)

Sense
Sense

Reputation: 1106

According to the official documentation,

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

I think it is a design decision of Vue to use the benefit of Vue instance’s reactive system rather than listening to DOM updates when such attributes are updated.

So you can put directly your default values into the result array, here's the updated working jsfiddle.

Upvotes: 1

Jaspreet Jolly
Jaspreet Jolly

Reputation: 1313

As Vue js is reactive you can simply set initial value in result

 new Vue({
      el: '#app',
      data: {
        result: ["1","1","1"],
        array: [{
            id: 1
        }, {
            id: 2
        }, {
            id: 3
        }]
      }
    })

Upvotes: 3

Related Questions