Vue generators produce invalid names for scoped slots

[J3m5]

Description
Vue generators produce invalid names for scoped slots For example:

     <template #item.admin/books="{ item }">
        <template v-if="router.hasRoute('BookShow')">
          <router-link
            v-for="book in item.raw.admin/books"
            :to="{ name: 'BookShow', params: { id: book['@id'] } }"
            :key="book['@id']"
          >
            {{ book["@id"] }}

            <br />
          </router-link>
        </template>

It show this error: Illegal '/' in tags.vue(22)

How to reproduce
Run the yarn test-gen command and look at the {quasar|vuetify|vue}/components/[foo]/[FooList].vue components

Possible Solution
The named scoped slots use the property names inside the table components to create the table cells and columns.

If we replace the slash with another character, we should make sure the slot name match the real property name from the API. We need to check how the properties received from the API are named.

Another solution, maybe, would be to use variable for slot names. But that would mean receiving them as props or declaring them in the script section, but it's not ideal.

Do you have an idea @dunglas ?

[dunglas]

A simple string replacement in the template is probably the best option here. WDYT?

[dunglas]

We could use a regex in the template to replace all special chars by a dash for instance.

[J3m5]

Yes we can but I'm wondering if we could just use the name of the field instead of the reference name or embedded name. This issue is also present in other places like in for loops: (FooShow.vue)

          <template v-if="router.hasRoute('BookShow')">
              <router-link
                v-for="book in item.admin / books"
                :to="{ name: 'BookShow', params: { id: book['@id'] } }"
                :key="book['@id']"
              >
                {{ book["@id"] }}

                <br />
              </router-link>
            </template>

Currently in the columns table definition, we simply use the name:

const columns = [
  { name: 'actions', label: t('actions'), field: '' },
  { name: 'id', field: '@id', label: t('id') },
  {{#each fields}}
  {
    name: '{{name}}',
    field: '{{name}}',
    label: t('{{../lc}}.{{name}}'),
    {{#if sortable }}
    sortable: true,
    {{/if}}
    {{#compare type "==" "dateTime" }}
    format: (value: string) => {
      return formatDateTime(value);
    },
    {{/compare}}
  },
  {{/each }}
];

And it the template we use the reference or embedded name:

    {{#each fields}}
    {{#if isReferences}}
    <template #body-cell-{{reference.name}}="{ value }">
      <td>
        <template v-if="router.hasRoute('{{reference.title}}Show')">
          <router-link
            v-for="{{lowercase reference.title}} in value"
            :to="{ name: '{{reference.title}}Show', params: { id: {{lowercase reference.title}} } }"
            :key="{{lowercase reference.title}}"
          >
            \{{ {{lowercase reference.title}} }}

            <br />
          </router-link>
        </template>

        <template v-else>
          <p v-for="{{lowercase reference.title}} in value" :key="{{lowercase reference.title}}">
            \{{ {{lowercase reference.title}} }}
          </p>
        </template>
      </td>
    </template>
    {{else if reference}}
    <template #body-cell-{{lowercase reference.title}}="{ value }">
      <td>
        <router-link
          v-if="router.hasRoute('{{reference.title}}Show')"
          :to="{ name: '{{reference.title}}Show', params: { id: value } }"
        >
          \{{ value }}
        </router-link>

        <p v-else>
          \{{ value }}
        </p>
      </td>
    </template>
    {{else if isEmbeddeds}}
    <template #body-cell-{{embedded.name}}="{ value }">
      <td>
        <template v-if="router.hasRoute('{{embedded.title}}Show')">
          <router-link
            v-for="{{lowercase embedded.title}} in value"
            :to="{ name: '{{embedded.title}}Show', params: { id: {{lowercase embedded.title}}['@id'] } }"
            :key="{{lowercase embedded.title}}['@id']"
          >
            \{{ {{lowercase embedded.title}}['@id'] }}

            <br />
          </router-link>
        </template>

        <template v-else>
          <p v-for="{{lowercase embedded.title}} in value" :key="{{lowercase embedded.title}}['@id']">
            \{{ {{lowercase embedded.title}}['@id'] }}
          </p>
        </template>
      </td>
    </template>
    {{else if embedded}}
    <template #body-cell-{{lowercase embedded.title}}="{ value }">
      <td>
        <router-link
          v-if="router.hasRoute('{{embedded.title}}Show')"
          :to="{ name: '{{embedded.title}}Show', params: { id: value['@id'] } }"
        >
          \{{ value['@id'] }}
        </router-link>

        <p v-else>
          \{{ value['@id'] }}
        </p>
      </td>
    </template>
    {{/if}}
    {{/each}}

My question is, is there a risk of name conflict or something else when using the field's name directly instead of its reference or embedded name for the template names, @dunglas?

[dunglas]

As long as the generated code is only about one RDF class (i.e. we don't support nested objects or similar patterns), this should be OK to use the field name.