Laravel 7和VueJs Vue Multiselect Noob问题 [英] Laravel 7 and VueJs Vue Multiselect Noob Question

问题描述

我对laravel和npm和vuejs东西完全陌生.我创建了一个新的Laravel项目，而不是玩转jquery，我想学习如何使用vuejs.

I am a totally noob at laravel and npm and vuejs things. I made a new Laravel Project and instead of playing around with jquery I want to learn how to use vuejs.

我今天碰壁了:(尝试2天以获取此Multiselect(

I ran against a wall today :( trying 2 days to get this Multiselect (https://vue-multiselect.js.org/#sub-select-with-search) running on my project. I think I am missing some basics ... What I've done: ran on terminal npm install vue-multiselect created in resources/js/comonents/Multiselect.vue pasted this code in /Multiselect.vue:

<template>
    <div>
        <multiselect
            v-model="selected"
            :options="options">
        </multiselect>
    </div>
</template>

<script>
    import Multiselect from 'vue-multiselect'
    export default {
        components: { Multiselect },
        data () {
            return {
                selected: null,
                options: ['list', 'of', 'options']
            }
        }
    }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

添加到我的app.js的资源文件夹中:

added to my app.js in resources folder:

 - import Multiselect from "vue-multiselect";
   - Vue.component('v-multiselect', require('./components/Multiselect.vue'));
   - const app = new Vue({
   -    el: "#app",
   -    data: {
   -  users: '',
   -  firmas: '',

}});

在我的刀片文件中，使用过:

and in my blade file I used:

  <v-multiselect></v-multiselect>

到目前为止...很好npm运行dev并刷新页面.

So far ... so good npm run dev and refreshed the page.

Error: 
index.js:133 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <VMultiselect>
       <Root>

所以我有两个问题，这是在Laravel中实现外部vuejs组件的正确方法吗?以及如果我做错了正确的方法怎么办-在什么时候??

so I have two questions is this the correct way to implement external vuejs components inte Laravel ? and what If it is the right way am I doing wrong - at which points???

谢谢大家帮助我学习...

Thank you all out there to help me to learn ...

推荐答案

很高兴您的代码能够正常工作！要回答您的问题，您似乎正在混合使用要导入的外部组件和使用该组件的自定义组件，这可能会使您感到有些困惑.

I'm glad you got your code working! To answer your question, it looks like you're using a mix of the external component you're importing and your own custom component which uses that component which may be what is confusing you a little bit.

执行以下操作时:

import Multiselect from "vue-multiselect";

在app.js文件中，您正在全局导入一个外部组件.当您将导入放置在组件内部时，您将导入仅在该组件内部使用的外部组件.在您发布的当前代码中，您正在全局范围内以及在您的组件中导入它.

inside your app.js file, you are importing an external component globally. When you place that import inside of a component, you are importing the external component for use within that component only. In your current code you've posted, you are importing it both globally and within your component.

如果要全局注册组件(在分配给vue实例的元素ID内)，则可以在app.js文件中这样注册:

If you are registering a component globally (within the element id assigned to the vue instance), you can register it like this within your app.js file:

import Multiselect from "vue-multiselect";
Vue.component('multiselect', Multiselect);

然后在您的组件中，您将不必再次导入它，而只需像这样使用它:

Then in your components, you will not have to import it again, but simply use it like this:

<template>
    <div>
        <multiselect v-model="selected" :options="options" placeholder="Select one" label="name" track-by="name"></multiselect>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                selected: null,
                options: ['one','two','three'],
            }
        },
    }
</script>

您还可以在刀片中使用此组件，因为它是在app.js文件中定义的.

You would also be able to use this component in your blade since it is defined within your app.js file.

但是，对于您现在使用的设置，您的解决方法是:

However with the setup you're using now, your fix of:

Vue.component('v-multiselect', require('./components/Multiselect.vue').default);

实际上没有注册外部组件.您正在注册您的组件.

is not actually registering the external component. You are registering YOUR component.

是的，为了回答您的问题，是的，您已经使用了一个外部组件，可以在其中制作您的自定义组件，并轻松地在其周围添加可重复使用的内容，这是完全有效的用法，但是您可以在自己的文件中删除多余的Multiselectapp.js文件，或者像我上面提到的那样全局导入Multiselect外部组件.

So to answer your question, yes, you've taken an external component where you can make your custom component and easily add reusable content around it which is perfectly valid use, but you could either remove the extra import of Multiselect in your app.js file, or import the Multiselect external component globally, like I mentioned above.

这篇关于Laravel 7和VueJs Vue Multiselect Noob问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！