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

[antony0716]

vue项目中遇到的问题，抽象之后如http://jsfiddle.net/eywraw8t/194748/

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

[丶吉丶]

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

[丶吉丶]

引用 1 楼 qq_40214672 的回复:

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

传入index

[antony0716]

引用 2 楼 qq_40214672 的回复:

[quote=引用 1 楼 qq_40214672 的回复:]
点击事件修改错误，应该是this.list[index].selected

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

[antony0716]

引用 2 楼 qq_40214672 的回复:

[quote=引用 1 楼 qq_40214672 的回复:]
点击事件修改错误，应该是this.list[index].selected

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

[丶吉丶]

引用 3 楼 antony0716 的回复:

[quote=引用 2 楼 qq_40214672 的回复:]
[quote=引用 1 楼 qq_40214672 的回复:]
点击事件修改错误，应该是this.list[index].selected

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

[/quote]
你把selected直接渲染在页面上，看看值有没有变化，
如果有变化那就是class判断错误

[antony0716]

引用 5 楼 qq_40214672 的回复:

[quote=引用 3 楼 antony0716 的回复:]
[quote=引用 2 楼 qq_40214672 的回复:]
[quote=引用 1 楼 qq_40214672 的回复:]
点击事件修改错误，应该是this.list[index].selected

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

[/quote]
你把selected直接渲染在页面上，看看值有没有变化，
如果有变化那就是class判断错误[/quote]
selected值没有变化
http://jsfiddle.net/eywraw8t/194886/

[丶吉丶]

引用 6 楼 antony0716 的回复:

[quote=引用 5 楼 qq_40214672 的回复:]
[quote=引用 3 楼 antony0716 的回复:]
[quote=引用 2 楼 qq_40214672 的回复:]
[quote=引用 1 楼 qq_40214672 的回复:]
点击事件修改错误，应该是this.list[index].selected

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

[/quote]
你把selected直接渲染在页面上，看看值有没有变化，
如果有变化那就是class判断错误[/quote]
selected值没有变化
http://jsfiddle.net/eywraw8t/194886/[/quote]
试试看$set设置值，

[___紫菜]

每个list里面加个selected属性

list: [{
      a: 11,
      b: 12,
      selected:false
    },{
      a: 21,
      b: 22,
      selected:false
    },{
      a: 31,
      b: 32,
      selected:false
    }]

[antony0716]

引用 8 楼 u013116426 的回复:

每个list里面加个selected属性

list: [{
      a: 11,
      b: 12,
      selected:false
    },{
      a: 21,
      b: 22,
      selected:false
    },{
      a: 31,
      b: 32,
      selected:false
    }]

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

[nayi_224]

Vue.set

[青稞i]

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

[程序员的键盘]

代码了解一下吗

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;
    }
  }
})

[qq_37121952]

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

[風灬雲]

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