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

Question

我正在尝试格式化输入中输入的数字，当我离开输入但该值未在 v 模型中更新时，我调用一个函数来执行此操作。

该函数工作正常，因为我警告了该值，但它从未在视图中更新。

任何想法？

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

您遇到了反应性问题，因为您正在为嵌套字段分配一个值，而该值未反映在 template 中，要解决此问题，请尝试使用this.$set：this.$set(this.budget,'personnelBudget',&nbsp;{...this.budget.personnelBudget,&nbsp;&nbsp; [year]:this.budget.personnelBudget[year].replace(/,/g, "")})然后尝试将输入作为字符串传递：&nbsp; &nbsp;<input ... v-on:blur="formatMoney('personnelBudget',year)" v-model="budget.personnelBudget[year]"/>和&nbsp;formatMoney(input,year) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; this.$set(this.budget,'personnelBudget',&nbsp; &nbsp; {...this.budget[input],&nbsp;&nbsp; &nbsp; &nbsp;[year]:this.budget[input][year].replace(/,/g, "")})