vue.js - 请教一个问题关于vue2中绑定class属性的问题

问题描述

问 题

请教一个问题关于vue2中 绑定class属性的问题

<!-- Repeat: status in statusList -->
<li v-for="status in statusList" :class="{'step-bar': status.code == project.attributes.status, 'next':status.code > project.attributes.status}" class="fl step-bar">
    <span class="step-desc"></span>
    <span class="step-doc ng-binding">${ status.name }</span>
</li>

在这个v-for 中， 绑定属性时， 用了一个判断表达式，为什么会报status变量未定义的错误.

TypeError: Cannot read property 'status' of undefined

但是如果是用 :class={‘fl': status} 这样的简单方式，就不会出错。
难道绑定class属性 ，表达式只能是变量， 写语句就读不到当前的status变量吗，怎么解决？

原来，在anglurjs 像这样绑定class属性，就没有这个问题。

解决方案

看你的代码，感觉是project.attributes未定义导致其下的.status无法访问。

所以，解决办法是：将代码中的

:class="{
    'step-bar': status.code == project.attributes.status,
    'next': status.code > project.attributes.status
}"

部分，先判断下project.attributes是否存在，代码如下：

:class="{
    'step-bar': project.attributes && status.code == project.attributes.status,
    'next': project.attributes && status.code > project.attributes.status
}"

这样如果project.attributes不存在则直接返回false，由于&&运算符的截断，所以不会运行含有project.attributes.status的代码，也就不会触发错误。

这篇关于vue.js - 请教一个问题关于vue2中绑定class属性的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！