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

Question

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

<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绑定的类并没有动态添加，想问是什么原因?

Answer 1

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

Answer 2

<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>

按你这个试下是可以的

Answer 3

用一个计算属性返回
result.isCollection
然后
:class="{ active : 你的计算属性}"
试试