无法读取未定义的属性错误:Vue绑定对象属性的类绑定类型错误
P粉617237727
P粉617237727 2023-08-26 23:55:21
[Vue.js讨论组]

我正在尝试根据对象属性绑定一个类,但是当我点击列表对象触发 @click 时,控制台告诉我无法读取 isSelected 的对象属性... 我正在尝试在动态渲染的列表项上使用一个函数来接收项目的 id,并将此属性设置为 false 或 true 时触发一个类来激活

希望有人能告诉我下面的代码中我漏掉了什么,谢谢 :)

<ul class="daysList">
  <li v-for="day in January" v-bind:class="{addedToTrip: day.isSelected}" class="daynum" @click="toggleIsSelected(day)" :key="day.id">
      {{day.val}}
  </li>
  </ul>

我的 vue 数据

data:function(){
    return{
      year: 2021,
      month: 1,
      day: 1,
      days:[18,19,20,21],
      January:[
          {name: 'January', isSelected: false, id: 1, val:1},
          {name: 'January', isSelected: false, id: 2, val:2},
          {name: 'January', isSelected: false, id: 3, val:3},
          {name: 'January', isSelected: false, id: 4, val:4},
          {name: 'January', isSelected: false, id: 5, val:5},
          {name: 'January', isSelected: false, id: 6, val:6},
          {name: 'January', isSelected: false, id: 7, val:7},
          {name: 'January', isSelected: false, id: 8, val:8},
          {name: 'January', isSelected: false, id: 9, val:9},
          {name: 'January', isSelected: false, id: 10, val:10},
          {name: 'January', isSelected: false, id: 11, val:11},
          {name: 'January', isSelected: false, id: 12, val:12},
          {name: 'January', isSelected: false, id: 13, val:13},
          {name: 'January', isSelected: false, id: 14, val:14},
          {name: 'January', isSelected: false, id: 15, val:15},
          {name: 'January', isSelected: false, id: 16, val:16},
          {name: 'January', isSelected: false, id: 17, val:17},
          {name: 'January', isSelected: false, id: 18, val:18},
          {name: 'January', isSelected: false, id: 19, val:19},
          {name: 'January', isSelected: false, id: 20, val:20},
          {name: 'January', isSelected: false, id: 21, val:21},
          {name: 'January', isSelected: false, id: 22, val:22},
          {name: 'January', isSelected: false, id: 23, val:23},
          {name: 'January', isSelected: false, id: 24, val:24},
          {name: 'January', isSelected: false, id: 25, val:25},
          {name: 'January', isSelected: false, id: 26, val:26},
          {name: 'January', isSelected: false, id: 27, val:27},
          {name: 'January', isSelected: false, id: 28, val:28},
          {name: 'January', isSelected: false, id: 29, val:29},
          {name: 'January', isSelected: false, id: 30, val:30},
          {name: 'January', isSelected: false, id: 31, val:31},

      ],
      February:[],
      March:[],
      April:[],
      May:[],
      June:[],
      July:[],
      August:[],
      September:[],
      October:[],
      November:[],
      December:[],
     

    }
  },

应用于 isSelected == true 时的 css 类

.addedToTrip{
    background-color: #2E9CFE;
    border-top: .5px solid black;
    border-bottom: .5px solid black;  
}

P粉617237727
P粉617237727

全部回复(1)
P粉709307865

在指定类名时,你需要使用单引号

ul class="daysList">
  <li v-for="day in January" v-bind:class="{'addedToTrip': day.isSelected}" class="daynum" @click="toggleIsSelected(day)" :key="day.id"> // 改变 added
      {{day.val}}
  </li>
  </ul>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号