Question

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

属性或方法“ props”未在实例上定义 ，但在渲染过程中被引用。通过初始化属性，确保在data选项中或对于基于类的组件，此属性都是反应性的。请参阅：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，并且在official documentation中可以看到v-slot指令是在Vue 2.6.0中引入的。尝试更新您的依赖项，看看它是否有效。

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

1 个答案: