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