Vue v-for场景下按字符长度绑类时计算属性this指向错误如何解决

报错原因 #

v-for 遍历产生的 node 是模板内部的局部变量，不属于Vue组件实例的属性，你在计算属性中通过 this.node 访问无法拿到对应值，所以会触发Cannot read property 'length' of undefined报错。

修复方案 #

方案一：改用接收参数的方法实现（推荐） #

计算属性不支持接收参数，对于需要传入遍历项的动态判断场景，替换为methods方法即可：

1. 修改模板中动态类绑定的代码，传入当前遍历的node：

<v-col
  v-for="(node, index) in activeConnect.nodes"
  :key="index"
>
  <v-card
    flex
    @click="edit(node)"
  >
    <v-card-text
      :class="getNameClass(node)"
      text-no-wrap
      v-text="node.content"
    />
  </v-card>
</v-col>

2. 删除原来的nameClass计算属性，在methods中新增对应方法：

methods: {
  getNameClass(node) {
    // 增加边界判断，避免content不存在时报错
    if (node && node.content && node.content.length > 4) {
      return 'name-small'
    }
    return 'name'
  }
}

方案二：模板内直接写三元判断 #

如果判断逻辑非常简单，可以直接在模板内完成判断，不需要额外定义方法：

<v-card-text
  :class="(node && node.content && node.content.length > 4) ? 'name-small' : 'name'"
  text-no-wrap
  v-text="node.content"
/>

你原有的SCSS样式代码不需要做任何修改即可正常生效。

内容的提问来源于stack exchange，提问作者Pianoc