Таблица vue-material не работает с синтаксисом v-slot - PullRequest
Новая
       68

Таблица vue-material не работает с синтаксисом v-slot

1 голос
/ 27 марта 2019

Я использую vue + vue-material для воспроизведения таблицы.

в документах vue-material я обнаружил, что рендеринг таблицы очень прост из-за «слотов» в vue , найденных здесь в «пользовательском шаблоне» - поэтому я попробовал на упрощенном примере только с именем + возраст 2 человека. 

<template>
        <md-table v-model="people">
            <md-table-row slot="md-table-row" slot-scope="{ item }">
                <md-table-cell md-label="name">{{ item.name }}</md-table-cell>
                <md-table-cell md-label="age">{{ item.age }}</md-table-cell>
            </md-table-row>
        </md-table>
</template>

<script>
    export default {
        name: 'app',
        data: () => {
            return {
                people: [
                    {name: "Alice", age: 22},
                    {name: "Bob", age: 21}
                ]
            }
        },
    }
</script>

доставляет удовольствие. Затем я посмотрел слоты на документах vue и обнаружил, что есть новый синтаксис для слотов с областью действия на vue 2.6 + . Естественно, я хотел попробовать это: 

<template>
        <md-table v-model="people">
            <md-table-row v-slot:md-table-row="{ item }">
                <md-table-cell md-label="name">{{ item.name }}</md-table-cell>
                <md-table-cell md-label="age">{{ item.age }}</md-table-cell>
            </md-table-row>
        </md-table>
</template>

Это не отображает таблицу, а также не регистрирует ошибки в консоли javascript.

Я нашел место, где этот слот определен здесь на github vue-material, чтобы убедиться, что все будет настроено в соответствии с документацией vue: 

 <tbody v-else-if="value.length">
          <md-table-row-ghost
            v-for="(item, index) in value"
            :key="getRowId(item, mdModelId)"
            :md-id="getRowId(item, mdModelId)"
            :md-index="index"
            :md-item="item">
            <slot name="md-table-row" :item="item" />
          </md-table-row-ghost>
        </tbody>

И да, slot name установлено, и v-bind:item="item" также там, так что, как я понимаю, это должно работать с новым синтаксисом v-слота.

Я что-то упустил?

EDIT:.

версия 2.6.6 vue материал 1.0.0.бета-10.2

Я попытался настроить простой компонент, определяющий только слот (то же имя, также привязанный к: item), и подключил его с использованием синтаксиса "new" - все заработало.

appSlot: 

<template>
    <div>
              <div v-for="name in names" :key="name">
                  <slot name="red-scope"
                        :content="name">
                  </slot>
              </div>
    </div>
<template>

, где names приходит через свойство из AppWrapper: 

<template>
    <AppSlot :names="names">
        <template #red-scope="{ content }">
            <p>hi {{content}}</p>
        </template>
    </AppSlot>
</template>
...
data() => {
    return {
        names: ["Alice", "Bob"]
    }
}

Не имеет большого практического смысла, но он проверяет, что моя установка может обрабатывать новый синтаксис, и он работает

...