list vue 删除后页面渲染_vue使用v-for渲染列表后如何改变状态？

我的目的就是当点击列表的时候，列表改变相应的样式，也就是变为选中状态。

为什么我点击相应列表的时候不会做出响应呢？

但是console.log里面的数据确实改变了，求解！

可以不可以在此基础上解决数据无法响应的问题？

Vue版本: v2.0.3

html:

• {{ active[index] + ' ' + list.title }}

javascript:

var app = new Vue({

el: '#app',

data: {

lists: [

{title: '标题1'},

{title: '标题2'},

{title: '标题3'},

{title: '标题4'},

{title: '标题5'},

{title: '标题6'},

],

active: [true, false, false, false, false, false]

},

methods: {

changeList: function(index) {

var sideBarList = document.querySelectorAll('.list');

for (let i = 0; i < sideBarList.length; i++) {

if (sideBarList[i] != sideBarList[index]) {

this.active[i] = false;

} else {

this.active[i] = true;

}

}

console.log(this.active);//这里会有变化

}

}

});

css:

ul{

padding: 0;

margin: 0;

width: 300px;

}

.list{

list-style: none;

width: 300px;

}

a{

display: block;

width: 100%;

height: 30px;

line-height: 30px;

text-decoration: none;

background-color: #eee;

}

a:hover, a.active{

background-color: #999;

color: white;

}