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模型并将事件传递给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"
      />

V模型更新所有实例

1 个答案: