Question

我试图在选择一个数字时更改gameBoard数组，但是在传递单元格ID来更改适当的索引时遇到了麻烦。具体来说，我想获取父单元格为空的ID，并使用该ID将其与gameBoard数组进行比较，并将其更改为输入的值。我现在正努力传递ID。

<template>
 <div> 
   <div class = "wrapper"> <div class= "list"  v-for="(n,index) in gameAnswer"> 
        <div  v-bind:id= "index" class = "cell-empty" v-if= "randomNumber(index)"> 
         <input type="text"> 
   </div>
  <div class = "cell"  v-else> {{n}}  </div>
  </div>
<br>
<br>
<div class = "list" v-for="n in gameBoard"> {{n}} </div>

    <br>
<br>
 <div class = "list" v-for="n in gameAnswer"> {{n}} </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],


   }
 },

  computed: {

 }
 },
  methods:{
    randomNumber: function(index){
  //  console.log(index);
    var val = Math.floor(Math.random()*3);
    if(val == 0){
    this.gameBoard[index] = 0;
    return true;
  } else{
    return false;
  }
},

  changeVal(index){
     console.log(index);
  }

 },

 };

</script>

Answer 1

由于JavaScript的限制，Vue无法检测到对数组的以下更改：

直接用索引设置项目时，例如vm.items[indexOfItem] = newValue修改数组的长度时，例如vm.items.length = newLength

例如：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // is NOT reactive
vm.items.length = 2 // is NOT reactive

要克服第1条警告，以下两项将与vm.items[indexOfItem] = newValue相同，但也会在反应性系统中触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

来源 https://vuejs.org/v2/guide/list.html#Caveats

示例我还没有测试过，但是应该可以工作

<script>
    export default {
        name: 'sudoku',
        data () {
            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]
            }
        },
        methods: {
            randomNumber (index) {
                var val = Math.floor(Math.random() * 3)
                if (val === 0) {
                    this.$set(this.gameBoard, index, 0)
                    return true
                } else {
                    return false
                }
            },
            changeVal (index, number) {
                this.$set(this.gameBoard, index, number)
            }
        }
    }
</script>

<template>
    <div>
        <div class="wrapper"> 
            <div class="list"  v-for="(number,index) in gameAnswer" :key="index"> 
                <div  v-bind:id="index" class="cell-empty" v-if="randomNumber(index)"> 
                    <input type="text" v-on:keyup="changeVal( index, number)"> 
                </div>
                <div class="cell"  v-else> 
                    {{number}}  
                </div>
            </div>

            <div class="list" v-for="(number, index) in gameBoard" :key="index"> 
                {{number}} 
            </div>

            <div class="list" v-for="(number, index) in gameAnswer" :key="index"> 
                {{number}} 
            </div>
        </div>  
    </div>
</template>

Vue：更新具有父单元格ID的阵列

1 个答案: