Vue.js Directive :key as an array. How to handle it?

Hi,
I have problem with :key directive. I’m using template when I have to pass date in format like "[native Date Thu Apr 18 2019 00:00:00 GMT+0200 (Central European Summer Time)]". I have got an error: Avoid using non-primitive value as key, use string/number value instead. - so I add :key="v.toString()", but then I have go an error Error in render: "TypeError: Cannot read property 'toString' of undefined".
This is my snippet code:

template(v-for="i in filterFormHumanized") 
          span.filter-tags__group {{ i.label }}: 
          el-tag( 
            v-for="v in i.values" 
            size="small" 
            type="info" 
            :key="v.toString()" 
            ) 
              span {{ v }}

What is the best way to avoid such errors?

As usual … it depends. The core issue is that filterFormHumanized[].values contains undefined elements. Ideally, there shouldn’t be holes in that array. You can either try to fix your data or work around by using the array index as key (cf. https://vuejs.org/v2/api/#v-for).

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.