Subscribe on changes!

Can't access component methods when binding :key on a template

avatar
Sep 10th 2020

Version

3.0.0-rc.10

Reproduction link

https://codesandbox.io/s/happy-fast-vfld6?file=/src/App.vue

Steps to reproduce

Open reproduction link, the code binds :key on a template using a method:

  <template v-for="item in items" :key="itemKey(item)">
    {{item.name}}
  </template>

What is expected?

Should render items normally without throwing an error

What is actually happening?

An error is thrown:

Uncaught ReferenceError: itemKey is not defined

avatar
Sep 10th 2020

Disallow key attribute on <template>

https://eslint.vuejs.org/rules/no-template-key.html

avatar
Sep 10th 2020

@lanezhao
In Vue 3 using key is valid with <template v-for>

avatar
Sep 10th 2020

It seems the template compiler is generating { key: itemKey(item) } rather than { key: _ctx.itemKey(item) }. That works in function mode but not in module mode.