vue.js change value not updated in input v-model

Question

I'm trying to format number i put in input, i call a function to do this when i left the input but the value is not updated in the v-model.

The function works fine because i alert the value but it never updated in view.

Any idea?

html

    <div v-for="year in years">    
       <input type="text" :disabled="budget.checked[year] == true" v-on:blur="formatMoney(budget.personnelBudget[year])" v-model="budget.personnelBudget[year]"/>
       <input type="text"  :disabled="budget.checked[year] == true" v-on:blur="formatMoney(budget.travellingBudget[year])" v-model="budget.travellingBudget[year]" />
       <input type="text"  :disabled="budget.checked[year] == true" v-on:blur="formatMoney(budget.inventoriableBudget[year]" v-model="budget.inventoriableBudget[year]" />

    .....

js

 data: function(){
            return{
                   budget:{
                    
                    personnelBudget:[],
                    travellingBudget:[],
                    inventoriableBudget:[],
                    consumablesBudget:[],
                    indirectExpensesPercent:[],
                    indirectExpensesBudget:[],
                    totalBudget:[],
                    checked:[],
                },
},

methods: {  
          
      formatMoney(input) {
                                            
                              
           this.budget.personnelBudget[year]=this.budget.personnelBudget[year]
                                              .replace(/,/g, "")
                                                    
           this.budget.personnelBudget[year]=parseFloat(this.budget.personnelBudget[year])
                                          .toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
           
           alert(this.budget.personnelBudget[year])
                                            
      },

Boussadjra Brahim · Accepted Answer · 2020-12-03 13:05:41Z

2

You've a reactivity issue because you're assigning a value to a nested field which is not reflected in template , to solve this try to use this.$set :

this.$set(this.budget,'personnelBudget',
 {...this.budget.personnelBudget, 
  [year]:this.budget.personnelBudget[year].replace(/,/g, "")})

then try try pass the input as string :

   <input ... v-on:blur="formatMoney('personnelBudget',year)" v-model="budget.personnelBudget[year]"/>

and

 formatMoney(input,year) {
                           
  this.$set(this.budget,'personnelBudget',
    {...this.budget[input], 
     [year]:this.budget[input][year].replace(/,/g, "")})

edited Dec 3, 2020 at 13:05

answered Dec 3, 2020 at 12:29

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

4 Comments

guilieen Over a year ago

ok i works fine! but to do that for others input in the same method is it correctly pass the v-model in :blur like: v-on:blur="formatMoney(budget.personnelBudget, year) ? the idea is to do that in every input passing the id and year

Boussadjra Brahim Over a year ago

I don't understand your new issue

guilieen Over a year ago

i updated my post, you can see i need to do that for others input, just the same

guilieen Over a year ago

Now is perfect, thanks! i just change the 'personnelBudget' in set for input to do that dinamicaly for others input

Collectives™ on Stack Overflow

vue.js change value not updated in input v-model

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related