vue.js怎么在v-for中使v-bind:class跟着变量值改变

Question

vue.js怎么在v-for中使v-bind:class跟着变量值改变，我现在只在页面刚渲染时才执行一次，但不会随着变量值变换动态渲染class

  <li v-for="item in items" v-on:click="clickOneItem(item.item_id)" v-bind:class="{active: isItemSelected(item.item_id)}">
    <input type="checkbox">
    <img v-bind:src="item.img_url">

    <div class="fyh-textcon">
        <p>{{ item.title }}</p>
         <p class="">价格：<span>¥ {{ item.price }}</span></p>
    </div>
  </li>
                
                
           <script>
                 ...     
methods: {
            isItemSelected: function (item_id) {
                var self = this;
                if (undefined == self.fetchedItems[item_id]) {
                    return false;
                }
                return self.fetchedItems[item_id].isSeclected;

            }
}
                 ...
          </script>       

Answer 1

v-bind:class="{active: item.isSeclected}"
楼主试试这种方式呢。

Answer 2

    <div v-for=" item in arr">
        <p :class="item.className"> {{ item.title }} </p>
    </div>
    
    或者：
    
    
    <div v-for=" item in arr">
        <p :class=" 'item-' + $index "> {{ item.title }} </p>
    </div>

    还有也可以使用过滤器filter
    
    

Answer 3

http://cn.vuejs.org/guide/ins...

Answer 4

什么鬼，你的class后面是个变量才是响应式的，你这就是一个方法，你的变量作为参数传进去的，怎么可能重新跑这个方法呢？
写的太复杂了，fetchItem是做什么的，一定要吗，你暴露给html的接口应当尽可能的简单，处理在js都做好，你给html的只要一个item的变量，更改列表的这个值。

Answer 5

这个和Vue的响应式原理相关，可以看这里：深入响应式原理

在 clickOneItem 这个方法里使用 $set 方法给isSeclected属性赋值就可以了

   // 将这个方法的参数直接修改为 item
    clickOneItem : function(item){
        this.$set(item,'isSelected',true)
    }

Answer 6

<template>
<div>
  <ul>
    <li v-for="(item,index) in items" @click="select(item,index)" :class="{'active':index==status}">
      <span>{{item}}-{{index}}</span>
    </li>
</ul>
</div>    
</template>
<script>
export default {
  data(){
    return{
      items:['a','b','c'],
      status:''
    }
  },
  methods:{
   select(item,index){
     this.status = index
   } 
 }
}
</script>
<style>
  li{ color:blue; }
  li.active{ color: red }

</style>