Question

尝试立即使用Vuetify组件时出现此错误。也许只是我不了解如何在Laravel中实现Vuetify组件。

Laravel v5.8.35，Vue v2.6.10，Vuetify v2.0.18。

错误：

[Vue警告]：渲染错误：“ TypeError：无法读取以下属性的't'   未定义”

位于

--->          <测试>在resources / js / components / Test.vue          <根>

app.js

require('./bootstrap');
window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

import Vuetify from 'vuetify';
Vue.use(Vuetify);
Vue.component('test', require('./components/Test.vue').default);

const app = new Vue({
    el: '#app',
});

layouts / vue.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Vue Examples</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
    <div id="app">
        @yield("content")
    </div>
    <script src="{{ asset('/js/app.js') }}"></script>
    </body>
</html>

test.blade.php

@extends('layouts.vue')

@section('content')
    <test></test>
@endsection

components / Test.vue

<template>
  <v-container fluid>
    <v-row align="center">
      <v-col class="d-flex" cols="12" sm="6">
        <v-select
          :items="items"
          label="Standard"
        ></v-select>
      </v-col>

      <v-col class="d-flex" cols="12" sm="6">
        <v-select
          :items="items"
          filled
          label="Filled style"
        ></v-select>
      </v-col>

      <v-col class="d-flex" cols="12" sm="6">
        <v-select
          :items="items"
          label="Outlined style"
          outlined
        ></v-select>
      </v-col>

      <v-col class="d-flex" cols="12" sm="6">
        <v-select
          :items="items"
          label="Solo field"
          solo
        ></v-select>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
  export default {
    data: () => ({
      items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
    }),
  }
</script>

如您所见，vue文件正是v-select组件的Vuetify源。不包含此功能的组件：

  export default {
    data: () => ({

所有其他组件（例如ExampleComponent）可以正常工作。

Answer 1

您需要创建Vuetify的实例。例如：

new Vue({
  el: '#app',
  vuetify: new Vuetify()
})

这已记录在here中，尽管他们确实将其隐藏在页面下方很长的距离。

无法使用Vuetify和Laravel读取未定义的属性't'

1 个答案: