[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading '$lang')"

Question

<Row>
  <i-col :span="8"><p class="item_key">{{ this.$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"
    >
      {{ this.$lang.ui.m024 }}
    </Checkbox>
  </i-col>
</Row>

for the first {{ this.$lang.ui.m024 }}, it works well in the web page, but for the {{ this.$lang.ui.m024 }} in the Checkbox, it has an error: [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading '$lang')"

Answer 1

Try to put your String into a <p> -Tag like following:

<Checkbox
  v-model="permissions"
  v-for="item in permissionsList"
  :value="item.value"
  :key="item.value"
  :name="item.name">
  <p>{{ this.$lang.ui.m024 }}</p> 
</Checkbox>

and than change this in your <style> :

.checkbox input,
.checkbox p {
  display: inline-block
}

Hopefully this works out for you - please let me know!