vue.js 更改值未在输入 v-model 中更新

Question

我正在尝试格式化输入输入的数字，当我离开输入但值未在 v-model 中更新时，我调用 function 来执行此操作。

function 工作正常，因为我提醒了该值，但它从未在视图中更新。

任何想法？

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

Answer 1

您有反应性问题，因为您正在为未反映在模板中的嵌套字段分配值，要解决此问题，请尝试使用this.$set ：

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

然后尝试尝试将输入作为字符串传递：

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

和

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