yuxian_li
yuxian_li
采纳率75%
2020-03-28 16:04

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

40

我给日历组件添加动态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内元素属性的变化了,但是页面上的元素样式依然没有发生变化。求解

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • qq_34313436 略懂前端萌新 1年前

    tradeDayList为什么不放在data(){return{}}里面

    点赞 评论 复制链接分享
  • Javon_huang Javon_huang 1年前

    可以了解下Vue数据双向绑定的原理,在V2.X版本,数据双向绑定是通过Object.defineProperty()数据劫持去做的,而list是一个数组对象,没有直接的Object.defineProperty(),需要通过for循环来处理,而你只改变里面对象的一个属性是没办法触发数据劫持的,需要手动更新下,官方有个Vue.set()用来更新数组对象的

    点赞 评论 复制链接分享
  • zqbnqsdsmd zqbnqsdsmd 1年前