v-for循环不被数据驱动了

Question

问题描述

v-for循环不被数据驱动了

问题出现的环境背景及自己尝试过哪些方法

刚创建的脚手架 自己做个小练习

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<template>
<div id="app">

<ul>
  <li v-for="(item,index) in arrB" :key="index" :class="{act: item}" @click="touch(index)">{{item}}</li>
</ul>

</div>
</template>

<script>

export default {
name: 'app',
data(){

return{
  arrB: [false, false, false, false, true]
}

},
methods:{

touch(item){
  let value = this.arrB[item]
  if (value) {
    this.arrB[item] = false
  } else {
    this.arrB[item] = true
  }
  console.log(this.arrB)
}

}
}
</script>

<style lang="scss">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
display: flex;
border: 1px solid #ccc;
border-right: 0;
margin: 20px;
li{

flex: 1;
height: 50px;
line-height: 50px;
text-align: center;
border-right: 1px solid #ccc;

}
.act{

background: red;

}
}
</style>

你期待的结果是什么？实际看到的错误信息又是什么？

true 变红 false白色

Answer 1

在VUE不能直接操作数组替换和修改值，因为ES6中并不支持对数组数据变化的监听，所以你只能用Vue修改过的数组变异方法array.push(),array.unshift(),array.splice()等方法修改数组的数据。还有一个vue.set()可以用来修改数组变化。通过这些方法来修改vue的数据，就监听到变化，视图也会跟着发生变化了。

Answer 2

1. 主要问题在于Vue没有监测到数组变化。

2. Vue监测数组变化的先决条件：

   • 替换数组(指针指向其他数组)。
   • 使用数组的变异方法。
   • 使用set对数组项的值进行赋值。

所以对数组进行处理的部分代码分析。

1. 如果目的是使用变异方法修改数组，则需要确保使用的确实是变异方法
2. 若目的是替换数组，是否确保替换后的数组与原数组是同一个对象，确保是替换，而不是重复赋值。
3. 若想利用索引直接设置一个项，不能直接修改值，而需要配合Vue提供的set方法去修改

题主的问题也就是第三点，需要使用set来直接修改数组项的值。。