未定义 vuetify 数据表/道具的非常奇怪的问题

Question

我正在使用 Vuetify 的 1.5.6 版（在 Laravel 5.8 后端和 VueJs 2.5.17 上感到不安）并将文档中的 DatatableComponent 示例之一 (https://vuetifyjs.com/en/components/data-tables) 放入我的应用程序按照我的要求采用它。但是，我没有做太多更改，但是当它在我的应用程序中运行时，每次呈现 datatable 时都会出现以下错误：

属性或方法 "props" 未在实例 上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于 class 的组件。参见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。在 TransactionComponent

当我在 Codepen 上尝试完全相同的代码时，它可以正常工作： https://codepen.io/anon/pen/Rdjjgx

在我的本地应用程序中，我有以下结构（与上面示例的唯一区别是，组件本身是通过 VueJs 路由器而不是通过模板加载的）：

TransactionComponent.vue:

<template>
  <v-card>
    <v-card-title>
      Transaktionen
      <v-spacer></v-spacer>
      <v-text-field
        v-model="search"
        append-icon="search"
        label="Suche..."
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="transactions"
      :search="search">
      <template v-slot:items="props">
        <td>{{ props.item.date }}</td>
        <td class="text-xs-right">{{ props.item.type }}</td>
        <td class="text-xs-right">{{ props.item.remark }}</td>
        <td class="text-xs-right">{{ props.item.plane }}</td>
        <td class="text-xs-right" v-bind:class="{'color':(props.item.fee > 0 ? '#0F0' : '#F00')}">{{ props.item.fee }}</td>
      </template>
      <v-alert v-slot:no-results :value="true" color="error" icon="warning">
        Ihre Suche für "{{ search }}" brachte keine Ergebnisse.
      </v-alert>
    </v-data-table>
  </v-card>
</template>

<script>
    export default {
        data() {
            return {        
                search: '',
                headers: [
                {
                    text: 'Datum',
                    align: 'left',
                    sortable: false,
                    value: 'date'
                },
                { text: 'Flugart', value: 'type' },
                { text: 'Beschreibung', value: 'remark' },
                { text: 'Type', value: 'plane' },
                { text: 'Betrag', value: 'fee' }
                ],
                transactions: [{date:"",type:"",remark:"",plane:"",fee:""}],
                loading: false
            };
        },
        methods: {
        },
        mounted() {
        }
    }
</script>

app.js（相关部分）：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('dashboard-component', require('./components/DashboardComponent.vue').default);

import Vuetify from 'vuetify'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
Vue.use(Vuetify)

import 'vuetify/dist/vuetify.min.css'

import DutyComponent from './components/DutyComponent.vue';
import TransactionComponent from './components/TransactionComponent.vue';
import AdminComponent from './components/AdminComponent.vue';

const moment = require('moment')
require('moment/locale/de')

Vue.use(require('vue-moment'), {
    moment
})

let router = new VueRouter({
    routes: [
      {
        path: '/duties',
        name: 'Dienste',
        component: DutyComponent,
      },
      {
        path: '/transactions',
        name: 'Pilotenkonto',
        component: TransactionComponent,
      },
      {
        path: '/admin',
        name: 'Admin',
        component: AdminComponent,
      }
    ]
  })

const app = new Vue({
    el: '#app',    
    router,
    data() {
      return {
          logged_in: true
      };
    }
});

app.blade.html（相关部分）：

<div id="app">
    <v-app id="inspire" dark>
        <dashboard-component ref="dashboard" v-if="logged_in"></dashboard-component>
    </v-app>
</div>

DashboardComponent.vue（相关部分 - 路由器视图也位于此处）：

<main>
    <v-content>
        <v-container>
            <v-fade-transition mode="out-in">
                <router-view></router-view>
            </v-fade-transition>
        </v-container>
    </v-content>
</main>

我已经尝试了所有方法，但没有任何运气，尊重文档。我看不出有什么问题。我只能猜测这个问题可能是由于将组件嵌入到应用程序中而不是 VueRouter 的不同。

请帮忙！谢谢！

Answer 1

您是运行 Vue 2.5.17，v-slot 指令是在 Vue 2.6.0 中引入的，您可以在 official documentation 中阅读。尝试更新您的依赖项，看看它是否有效。

未定义 vuetify 数据表/道具的非常奇怪的问题

Very strange problem with vuetify datatable / props is not defined

datatable

vue.js

vue-router

vuetify.js