vue中循环列表属性取反操作没效果

Question

vue项目中遇到的问题，抽象之后如http://jsfiddle.net/eywraw8t/194748/描述：请求之后获得的一个数据列表，给列表中的每一项添加一个flag，来控制他的样式，并且点击每条数据时切换这个flag的true/false状态，从而期望达到控制样式的目的。但是实际效果却和期望不符。请大家帮我看看问题出在哪？怎么解决？

Answer 1

点击事件修改错误，应该是this.list[index].selected

Answer 2

传入index

Answer 3

传入index
按照你说的试了一下，依然没效果
数据其实已经变更了，但是视图没有跟着变

Answer 4

传入index
如果这个flag属性是直接定义在data中的就没问题，经过created中遍历操作后续添加这个属性之后就不可以了，实在想不出原因。

Answer 5

传入index
按照你说的试了一下，依然没效果
数据其实已经变更了，但是视图没有跟着变
你把selected直接渲染在页面上，看看值有没有变化，
如果有变化那就是class判断错误

Answer 6

传入index
按照你说的试了一下，依然没效果
数据其实已经变更了，但是视图没有跟着变
你把selected直接渲染在页面上，看看值有没有变化，
如果有变化那就是class判断错误
selected值没有变化
http://jsfiddle.net/eywraw8t/194886/

Answer 7

传入index
按照你说的试了一下，依然没效果
数据其实已经变更了，但是视图没有跟着变
你把selected直接渲染在页面上，看看值有没有变化，
如果有变化那就是class判断错误
selected值没有变化
http://jsfiddle.net/eywraw8t/194886/
试试看$set设置值，

Answer 8

每个list里面加个selected属性
list: [{
      a: 11,
      b: 12,
      selected:false
    },{
      a: 21,
      b: 22,
      selected:false
    },{
      a: 31,
      b: 32,
      selected:false
    }]

Answer 9

这样肯定是没问题的，我在前面已经说了，但是问题就出在这，我的数据是ajax请求后台返回的，我没办法预先设置。

Answer 10

Vue.set

Answer 11

虽然你数据修改了但是你页面的list selected 依旧为false,所以你第二次改变数据,页面却没有去渲染的。
你可以把数据打在页面上看看  。
vue.set我测试了 但是好像没有什么效果。
这是我能想到的办法  http://jsfiddle.net/5cjmo0ts/3/

Answer 12

代码了解一下吗
new Vue({
  el: "#app",
  data: {
    list: [{
      a: 11,
      b: 12
    },{
      a: 21,
      b: 22
    },{
      a: 31,
      b: 32
    }]
  },
  created(){
    for(let i=0; i<this.list.length; i++){
      this.$set(this.list[i], "selected", false);
    }
  },
  methods: {
    select(index){
    this.list[index].selected = !this.list[index].selected;
    }
  }
})

Answer 13

this指向问题，可以提前存一下var _this = this

Answer 14

select(index){
     let arr = JSON.parse(JSON.stringify(this.list))
      arr[index].selected = !arr[index].selected
      this.list=arr
    }
vue 重新绘制的条件，你是循环list生成的页面，必须修改list,界面才会重绘，
只修改list里面元素的属性是不会重绘的