Vue渲染报错：Checkbox内调用this.$lang报未定义但外部调用正常

报错原因 #

• Vue模板的插值表达式默认会自动绑定当前组件实例作为上下文，不需要手动加this前缀。你在v-for循环生成的Checkbox组件插槽内写this.$lang时，this的指向被循环/组件插槽的独立作用域覆盖，不再指向当前页面的Vue组件实例，而是指向了Checkbox组件实例或者循环内部上下文，该上下文下没有挂载$lang属性，所以抛出读取undefined属性的错误。
• 第一个插值能正常渲染是因为外层没有作用域嵌套，this还能正确指向当前组件实例。

解决方案 #

方案1（推荐）：移除模板中的this前缀 #

直接将所有插值里的this.$lang.ui.m024改为$lang.ui.m024即可，Vue会自动从当前组件实例查找对应属性，不受作用域嵌套影响。修改后代码如下：

<Row>
  <i-col :span="8"><p class="item_key">{{ $lang.ui.m024 }}</p></i-col>
  <i-col :span="16">
    <Checkbox
      v-model="permissions"
      v-for="item in permissionsList"
      :value="item.value"
      :key="item.value"
      :name="item.name"
    >
      {{ $lang.ui.m024 }}
    </Checkbox>
  </i-col>
</Row>

方案2（可选）：提前挂载全局语言变量到计算属性 #

如果需要保留实例属性引用逻辑，可以在组件内新增计算属性暴露$lang：

// 组件的computed配置
computed: {
  globalLang() {
    return this.$lang
  }
}

然后模板内直接调用计算属性即可：{{ globalLang.ui.m024 }}

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