如何解决 Vue js 中的绑定问题答案

【问题标题】：How to fix binding issue in Vue js如何解决 Vue js 中的绑定问题
【发布时间】：2020-03-15 13:18:52
【问题描述】：

 <tr :key="indexProject"  v-for="(project,indexProject) in currentUserProjects">
           <td>
              <div>
                {{project.name}} -  {{project.client.name}}
              </div>
           </td>
           <td :key="indexDay"  v-for="(day,indexDay) in days">
              <v-text-field v-if="indexDay < 7 && daysMatrix.length > 0" v-model="daysMatrix[indexProject] 
                 [indexDay].hours" v-on:input="calculateProjectTotal(daysMatrix[indexProject][indexDay].hours, indexProject)"/>
              <div v-if="indexDay >= 7 && daysMatrix.length > 0 ">
                 {{daysMatrix[indexProject][indexDay]}}
              </div>
            </td>
            <td class="remove_time">
               <v-btn @click="remove(indexProject)"  icon>
                   <v-icon>mdi-delete-forever</v-icon>
               </v-btn>
            </td>
         </tr>






remove(indexProject){
                console.log(indexProject)
                this.daysMatrix[indexProject][0].hours = 0
                this.daysMatrix[indexProject][1].hours = 0
                this.daysMatrix[indexProject][2].hours = 0
                this.daysMatrix[indexProject][3].hours = 0
                this.daysMatrix[indexProject][4].hours = 0
                this.daysMatrix[indexProject][5].hours = 0
                this.daysMatrix[indexProject][6].hours = 0
 },

正如您看到的屏幕截图和代码，当我单击删除按钮时，我尝试将所有字段设置为时间输入。但它什么也没发生。请帮我。提前谢谢你

这是附加代码

【问题讨论】：

你看到控制台日志了吗？控制台中是否有任何错误？乍一看，这似乎是一个反应性问题，但如果不知道数据最初是如何填充的，就很难确定。您能否包括最初填充daysMatrix 的代码？尝试使用$set 设置值，这可能会修复它，但即使它做了正确的修复，首先要确保数据是反应性的。
感谢您的回复是的，我可以在控制台上看到正确的值。
能否包含填充daysMatrix 的代码？当前代码仅显示了空数组的创建。关键阶段是将值添加到该数组时。你必须做得恰到好处，否则他们最终不会反应过来。
我正在使用 Vuex。其他功能运行良好，很奇怪。如何与您分享代码？
把它放在问题中。另外，请将所有代码发布为文本，而不是图片。最初的种群可能会违反反应性警告之一。如果您想检查自己，请查看vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

标签： vue.js v-model

【解决方案1】：

正如 cmets 中所述，这是一个反应性问题。只有设置整个值、使用某些数组方法或使用 .$set 方法才会触发反应。你需要做更多类似的事情

const days = this.daysMatrix
days[indexProject][0].hours = 0
days[indexProject][1].hours = 0
//...

this.daysMatrix = days

或

this.daysMatrix[indexProject].forEach((value, index) => {
  this.$set(this.daysMatrix[indexProject][index], 'hours', 0)
})

【讨论】：