Laravel 7 和 VueJs Vue 多选菜鸟问题答案

【问题标题】：Laravel 7 and VueJs Vue Multiselect Noob QuestionLaravel 7 和 VueJs Vue 多选菜鸟问题
【发布时间】：2020-12-03 04:33:28
【问题描述】：

我在 laravel、npm 和 vuejs 方面完全是个菜鸟。我做了一个新的 Laravel 项目，而不是玩 jquery，我想学习如何使用 vuejs。

我今天碰壁了 :( 尝试 2 天让这个 Multiselect (https://vue-multiselect.js.org/#sub-select-with-search) 在我的项目中运行。我想我缺少一些基础知识... 我做了什么：在终端上运行 npm install vue-multiselect 在 resources/js/comonents/Multiselect.vue 中创建将此代码粘贴到 /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 中：

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

}});

在我使用的刀片文件中：

  <v-multiselect></v-multiselect>

到目前为止...非常好 npm run dev 并刷新页面。

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

found in

---> <VMultiselect>
       <Root>

所以我有两个问题，这是在 Laravel 中实现外部 vuejs 组件的正确方法吗？如果这是正确的方式，我做错了怎么办？在哪一点？？？

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

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

非常感谢索耶，

我明白了，我想:( 我想在我的页面中多次使用这个多选组件。所以我在我的 app.js 中删除了额外的导入 - 在 phpstorm 中看到它没有使用但不知道为什么:) - 现在我知道了。

到目前为止我所拥有的：

如果我错了就打我:) 在 app.js 中：（注册我自己的组件）

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

使用这个 src 将 Multiselect.vue 添加到我在 laravel 中的组件文件夹中：

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

<script>
    import Multiselect from 'vue-multiselect'

    // register globally
    Vue.component('multiselect', Multiselect)

    export default {
        // OR register locally
        components: { Multiselect },
        data () {
            return {
                value: null,
                options: ['option1','option2','option3']
            }
        }
    }
</script>

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

在我的刀片文件中：

 <v-multiselect :options="['one','two','three']" ></v-multiselect>

我从 vuejs 中完全没有收到任何错误，但它没有按应有的方式工作：如何覆盖刀片文件中的选项数组？正如我在文档中看到的那样，“选项”是组件的一个道具，所以为什么我会选择预定义的选项数组 ['option1','option2','option3'] 而不是刀片文件中的数组：[' one','two','three'] 我错过了快捷方式还是其他什么？非常感谢您的耐心... 如果你能告诉我在哪里阅读它 - 除了 vuejs 的文档 - 我认为这会对我有很大帮助！

【讨论】：

你必须在 Multiselect.vue 上注册选项作为道具
非常感谢！！！！两个都！！！它按预期工作！这里有没有人有关于 udemy 的任何文档或更好的视频……我可以在哪里更深入地研究 laravel 和 vuejs？不要再问这种无聊的问题了？再次感谢！
尝试在 youtube 上搜索 Laravel + Vue
并尝试找到在 Github 上启动的 Laravel SPA vue 很好用它作为启动

【解决方案2】：

很高兴您的代码可以正常工作！为了回答您的问题，您似乎正在使用您正在导入的外部组件和您自己的使用该组件的自定义组件，这可能会让您有点困惑。

当您执行以下操作时：

import Multiselect from "vue-multiselect";

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

如果你在全局注册一个组件（在分配给 vue 实例的元素 id 内），你可以在你的 app.js 文件中这样注册它：

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

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

<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 文件中定义的。

但是，使用您现在使用的设置，您可以解决以下问题：

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

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

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

【讨论】：

【解决方案3】：

更新：找到了我的问题的解决方案：在我的应用 js 中有错误！

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

我注册了错误的组件:( 所以第二个问题得到了回答:) 但是你们也这样做吗？或者我完全错误地将外部组件实现到 laravel 中？我暂时不想使用 vueex 或 vuerouter ...我需要学习 laravel 本身 ...之后我知道 Laravel 是如何工作的我将使用 vuerouter ...用于我的项目... 很抱歉这么长的文字 - 但需要更多地解释一下这种情况 - 感谢各位阅读！

【讨论】：