通过索引值修改数组中的元素不是响应式的（vue）

嗯，模型做好了要放到平台上，开始嗑前端vue：看王元红老师的视频，第一次作业要求实现列表点击变色。代码如下

 

<html lang = "en">
    <head>
	<meta charset="utf-8">
	<title>Title</title>
	<script src = "vue.js"></script>
	<style>
	    .active{
		color: red
	    }
	</style>
    </head>
    <body>
	<div id="app">
	    <ul>
		<li v-for="(m, index) in movies"  @click="changeColor(index)" :class="{active: isActive[index]}">{{m}}</li>
	    </ul>
	</div>
	<script>
	    const app = new Vue({
		el: "#app",
		    data: {
			movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],
			isActive: [true, false, false, false]
		    },
		    methods: {
			changeColor: function(index){
			    console.log(index + "has changed to be true");
			    // this.isActive[index] = true;  通过索引修改数组值不是响应式的
			    this.isActive.splice(index, 1, true);
		        }
		    }
		})
	</script>
    </body>
</html>

　　之前用this.isActive[index] 来修改数组值，页面上的字体一直不变色，但检查isActive的值又是变的，纠结了半天，才有大神点醒说通过索引修改数组值不是响应式的。特此mark

posted @ 2021-08-19 11:33  玻璃公主  阅读(379)  评论(0)    收藏  举报