V-model更新所有实例

Question

我的代码准确地更新了gameInput数组，但是当您编辑数字时，tempval会直观地填充每个空单元格-有什么方法可以避免这种情况吗？但是，它只更新需要的单元格，而不是所有单元格。只有在你输入的时候，它才是可视的。

<template>
<div> 
 <div class = "wrapper"> 
   <div class = "list" v-for="(number,index) in gameNums" :key="index">
     <div class = "cell=empty" v-if="number == 0">  <input  type="text" v-on:change="changeVal(index)" v-model="tempval" v-bind:id="'empty'+ index"">  </div>
    <div class = "cell" v-else> {{number}} </div>
  </div>
</div> 
</div>
</template>
<script>
  export default {
    name: 'sudoku',  
    data: function(){
    return{
       gameAnswer: [4,3,5,2,6,9,7,8,1,6,8,2,5,7,1,4,9,3, 1,9,7,8,3,4,5,6,2, 8,2,6,1,9,5,3,4,7, 3,7,4,6,8,2,9,1,5,9,5,1,7,4,3,6,2,8,5,1,9,3,2,6,8,7,4, 2,4,8,9,5,7,1,3,6,7,6,3,4,1,8,2,5,9],
       gameBoard: [4,3,5,2,6,9,7,8,1,6,8,2,5,7,1,4,9,3, 1,9,7,8,3,4,5,6,2, 8,2,6,1,9,5,3,4,7, 3,7,4,6,8,2,9,1,5,9,5,1,7,4,3,6,2,8,5,1,9,3,2,6,8,7,4, 2,4,8,9,5,7,1,3,6,7,6,3,4,1,8,2,5,9],
       gameInput: [4,3,5,2,6,9,7,8,1,6,8,2,5,7,1,4,9,3, 1,9,7,8,3,4,5,6,2, 8,2,6,1,9,5,3,4,7, 3,7,4,6,8,2,9,1,5,9,5,1,7,4,3,6,2,8,5,1,9,3,2,6,8,7,4, 2,4,8,9,5,7,1,3,6,7,6,3,4,1,8,2,5,9],
       gameWon: 0,
       tempval : 0
      }
     },
   computed: {
     gameNums: function() {
     var i = 0;
     while(i < 35){
      var val = Math.floor(Math.random()*82);
      console.log(i);
     this.gameBoard[val] = 0;
     this.gameInput[val] = 0;
     i = i+1;
   }
   return this.gameBoard;
  }
  },
 methods:{
  randomNumber: function(index){
  var val = Math.floor(Math.random()*3);
  if(val == 0){
    this.gameBoard[index] = 0;
    return true;
  } else{
    return false;
  }
 },

 changeVal(index, number){
   this.gameInput[index]= this.tempval;
   console.log(number + "number");

   }

  },

  };

</script>

Answer 1

这里的问题是，您对所有输入都使用与v-model相同的变量tempval，因此，一旦tempval发生更改，它就会在所有输入上更新。

解决此问题的一种方法是，如果您希望所有输入同时处于活动状态，则删除v-model并将事件传递给changeVale方法：

<input
        type="text"
        v-on:change="changeVal(index, $event);"
        v-bind:id="'empty' + index"
      />

然后在changeVal方法中：

changeVal(index, event) {
  this.gameInput[index] = event.target.value;
}

我用v-on:change尝试了这种方法，我不太喜欢它，因为它不会立即触发。当您更改焦点或按enter键时，它会被触发。

我更喜欢使用keyup：

    <input
        type="text"
        v-on:keyup="changeVal(index, $event);"
        v-bind:id="'empty' + index"
      />