使用vue动态切换属性不生效

Question

我给日历组件添加动态class样式：

<template slot="dateCell" slot-scope="{date, data}">
  <p
     @click="change(data)"
      :class="{ 'redbgc':tradeDayList[data.day].isred,'greenbgc':tradeDayList[data.day].isgreen }"
  >
    {{ data.day.split('-').slice(1).join('-') }}
 </p>
</template>

上面代码中的redbgc和greenbgc是设置背景色红色或绿色的class，后面的tradeDayList是个key-value的形式，类似于：

const tradeDayList={
        '2019-01-01':{
          isred: 0,
          isgreen: 0,
        },
        '2019-01-02':{
          isred: 0,
          isgreen: 1,
        },
}

tradeDayList一开始所有的元素的isred和isgreen都是0，后来由点击事件触发change方法，改变对应的元素的isred和isgreen属性。
此时，页面上的样式并不会动态切换，而且浏览器控制台上的vue实例也没有动态的监听到tradeDayList内元素属性的变化，因此我让每次点击事件结束后，调用this.$forceUpdate()方法，强制重新渲染，此时浏览器控制台能动态的监听到tradeDayList内元素属性的变化了，但是页面上的元素样式依然没有发生变化。求解

Answer 1

https://blog.csdn.net/weixin_30640769/article/details/96157078