Question

我正在尝试在laravel项目的vue组件中使用VAutocomplete。

我这样安装了vuetify：

npm install vuetify

用于加载组件的.js如下所示：

import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)

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

import MyComponent from './components/MyComponent.vue';




const app = new Vue({
    el: '#my-component,
    components: {
        MyComponent
    },
    render: h => h(MyComponent)
});

MyComponent.vue：

<template>
    <div>
      <v-autocomplete
                    label="Components"
                    :items="components"
            ></v-autocomplete>


    </div>
</template>

<script>

    export default {
        name: "MyComponent",
        data: function () {
            return {
                components: [
                    'Autocompletes', 'Comboboxes', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields',
                ],
            }
        },
}
</script>

我在浏览器控制台中看到以下错误：

[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'this.$vuetify.lang.t')"

found in

---> <VAutocomplete>

Laravel是5.6 Vue 2.9.6 Vuetify 2.0.2

有人可以给我提示以开始使用vuetify吗？谢谢！

Answer 1

我有同样的问题。解决方法如下：

确保将正确的vue和vue-template-compiler版本添加到package.json。然后删除“ node_modules”文件夹并重新安装：

npm install

您还应该在webpack.mix.js中导入VueLoaderPlugin。

const VueLoaderPlugin = require('vue-loader/lib/plugin')

您的混音呼叫应如下所示：

mix.js('resources/assets/js/app.js', 'public/js').extract(['vue'])
    .js('resources/assets/js/mycomponent.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css').webpackConfig({
    plugins: [
        new VueLoaderPlugin()
    ]
}).sourceMaps();

.sourceMap（）以避免丢失vuetify.js.map错误。

Answer 2

错误是因为您错过了“

const app = new Vue({
el: '#my-component', <=here
   components: {
        MyComponent
    },
    render: h => h(MyComponent)
});

另一个错误是您的模板中没有ID。

它应该以这种方式工作：

<div id="my-component">
    <v-app id="inspire">
        <div>
          <v-autocomplete
             label="Components"
             :items="components"
         ></v-autocomplete>
      </div>
    </v-app>
</div>

脚本：

new Vue({
el: '#my-component',
vuetify: new Vuetify(),
data () {
    return {
       components: [
           'Autocompletes', 'Comboboxes', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields'],
        }
    },
})

如何在Laravel中使用Vuetify（VAutocomplete）

2 个答案: