vue动态绑定:class，值改变，但并未动态添加类目

Z时代
2024-01-10
分类：技术分享

大概的代码,简而言之就是一个收藏按钮状态切换

<span
class="icon-star"
:class='{ "active" : result.isCollection==true}'
@click="collectionHandler(result.isCollection)"
></span>

collectionHandler(isCollection) {
this.$set(this.result, 'isCollection', !isCollection)
console.log(this.result.isCollection)}

通过控制台可以判断当前 result.isCollection 的值是根据点击在动态变化的，但是:class绑定的类并没有动态添加，想问是什么原因?

回答

:class='{ "active" : result.isCollection}'

<template>
  <div id="app">
    <span
      class="icon-star"
      :class="{ active: result.isCollection == true }"
      @click="collectionHandler(result.isCollection)"
    >
    </span>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      result: {
        isCollection: false,
      },
    };
  },
  methods: {
    collectionHandler(isCollection) {
      console.log(isCollection)
      this.$set(this.result, "isCollection", !isCollection);
      console.log(this.result.isCollection);
    },
  },
};
</script>
<style>
.icon-star {
  display: block;
  width: 100px;
  height: 100px;
  background: lightblue;
}
.active {
  background: red;
}
</style>