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

Question

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>

can you post some part of code in here

ﾃﾞﾋﾞｯﾄ
– ﾃﾞﾋﾞｯﾄ

2019-02-21 09:41:55 +00:00
Commented Feb 21, 2019 at 9:41 — ﾃﾞﾋﾞｯﾄ
– ﾃﾞﾋﾞｯﾄ, Commented Feb 21, 2019 at 9:41

Jaspreet Jolly · Accepted Answer · 2019-02-21 09:42:21Z

3

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
        }]
      }
    })

answered Feb 21, 2019 at 9:42

Jaspreet Jolly

1,32111 silver badges28 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-16 01:36:23Z

1

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.

edited Jul 16, 2022 at 1:36

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 21, 2019 at 9:47

Sense

1,1068 silver badges21 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related