时间戳

首页 > 解决方案 > Vue：使用父单元格的 ID 更新数组

vue.js - Vue：使用父单元格的 ID 更新数组

问题描述

我试图在选择一个数字后更改 gameBoard 数组，但我无法通过单元格的 id 来更改适当的索引。具体来说，我想取父单元格的 id 为空，并使用它将它与 gameBoard 数组进行比较并将其更改为输入的值。我现在正在努力传递身份证。 

<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>

标签： vue.jsvue-component

解决方案

由于 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>

推荐阅读