apostrophecms / apostrophe

A full-featured, open-source content management framework built with Node.js that empowers organizations by combining in-context editing and headless architecture in a full-stack JS environment.
https://apostrophecms.com
Other
4.36k stars 590 forks source link

3.x: Ensure proper vue unique keys for array-like fields #2902

Closed myovchev closed 3 years ago

myovchev commented 3 years ago

To Reproduce

  1. add a relation to any piece module and expose it as column to admin UI:
    // modules/somemodule/index.js
    module.exports = {
    extend: '@apostrophecms/piece-type',
    options: { ... },
    fields: {
    add: {
      _tags: {
        type: 'relationship',
        label: 'Tags',
        withType: '@someNs/taxonomy'
      }
    }
    },
    columns: {
    add: {
      _tags: {
        label: 'Tags',
        component: 'AposCellRelation'
      }
    }
    }
    // ...
    };
  2. add the UI component to render correctly the value:
    
    <!-- modules/somemodule/ui/apos/components/AposCellRelation.vue -->
    <template>
    <p
    class="apos-table__cell-field"
    :class="`apos-table__cell-field--${header.name}`"
    >
    {{ formattedTags }}
    </p>
    </template>

## Expected behavior
Value is rendered as admin UI cell correctly and without any errors.

## Describe the bug
Although the value is really properly rendered, vue is throwing warning (browser console): 
`[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.`

Coming from ReactJS world, I'm pretty much sure unique keys are really important for the framework.
I didn't debug deeper, but from the look of it, it seems A3 UI is trying to use the object items in the array as unique key without checking if they are really primitives. I think apos UI should handle list keys for types `array` and `relation` (as both do have an unique `_id` string) even if it doesn't know how to render the value of  a given `Array of objects`.

## Details

Apostrophe v3.0.0-alpha.7

**Version of Node.js:**
12.x

**Server Operating System:**

Distributor ID: Ubuntu Description: Ubuntu 20.04.2 LTS Release: 20.04 Codename: focal



**Additional context:**
> Add any other context about the problem here. If the problem is specific to a browser, OS or mobile device, specify which.
boutell commented 3 years ago

Hi @myovchev, are you still experiencing this issue? I've been over the code and it looks like we're using the header name as a key, which makes sense and shouldn't touch on the question of its value at all. But it's been a while since you opened this (:

myovchev commented 3 years ago

Hey @boutell, I've just re-enabled the relevant feature on my project and now it works as expected. Well done :) I'm closing the issue.

boutell commented 3 years ago

Thanks for checking Miro!

On Tue, Jun 15, 2021 at 4:52 AM Miro Yovchev @.***> wrote:

Closed #2902 https://github.com/apostrophecms/apostrophe/issues/2902.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/apostrophecms/apostrophe/issues/2902#event-4890233517, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAH27JYOJUNV2T2BYDVN53TS4IEVANCNFSM42ZQZQZA .

--

THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his