Vue.js 注册并使用Vue Multiselect组件

我想在我的应用程序中注册并使用Vue Multiselect组件，但我是新手。我会尽量简化我的代码，我想有一个如何做到这一点的帮助

我必须在哪里插入引用才能使用Usuarios.cshtml文件中已有的multiselect

以下是指向组件的链接：

我的代码：

Usuarios.js:

var tableUsuario;

var appUsuario = new Vue({
    el: "#usuarioApp",
    watch: {},
    data: {
        Grupos: [],
        Grupo: '',
        Filiais: [],
        FiliaisSelecionadas: []
    },
    methods: {
        getGrupos: function () {
            var self = this;

            $.ajax({
                type: "POST",
                url: "../Account/GetGruposFocus",
                success: function (data) {
                    self.Grupos = data.grupos;
                },
                error: function (error) {
                    console.log(error);
                    alert('Erro ao executar operação.');
                }
            });
        },
        getFiliaisByNomeGrupo: function () {
            var self = this;
            var nome = self.Grupo.value.Nome.replace(/ .*/, '');

            $.ajax({
                type: "POST",
                url: "../Account/GetFiliaisByNomeGrupo",
                data: { nome },
                success: function (data) {
                    self.Filiais = data.clientes;
                },
                error: function (error) {
                    console.log(error);
                    alert('Erro ao executar operação.');
                }
            });
        }
    },
    mounted: function () {
        self.getGrupos();
    }
});

[...]
<section id="usuarioApp" class="content">
    <div class="modal fade" id="modal-default" style="display: none;" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Cadastrar usuário</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="selectedGrupo">Grupo</label>
                                <select class="form-control" id="selectedGrupo" v-model="Grupo.value" v-on:change="getFiliaisByNomeGrupo">
                                    <option v-for="grupo in Grupos" v-bind:value="grupo">{{grupo.Nome}}</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label for="selectedFiliais">Filiais</label>
                                <multiselect v-model="FiliaisSelecionadas" placeholder="Filiais" :options="Filiais" :multiple="true" :taggable="true"></multiselect>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" v-on:click.prevent="salvar" class="btn btn-primary">Salvar</button>
                </div>
            </div>
        </div>
    </div>

</section>
<script src="~/Content/js/Views/Account/Usuarios.js"></script>

Usuarios.cshtml:

var tableUsuario;

var appUsuario = new Vue({
    el: "#usuarioApp",
    watch: {},
    data: {
        Grupos: [],
        Grupo: '',
        Filiais: [],
        FiliaisSelecionadas: []
    },
    methods: {
        getGrupos: function () {
            var self = this;

            $.ajax({
                type: "POST",
                url: "../Account/GetGruposFocus",
                success: function (data) {
                    self.Grupos = data.grupos;
                },
                error: function (error) {
                    console.log(error);
                    alert('Erro ao executar operação.');
                }
            });
        },
        getFiliaisByNomeGrupo: function () {
            var self = this;
            var nome = self.Grupo.value.Nome.replace(/ .*/, '');

            $.ajax({
                type: "POST",
                url: "../Account/GetFiliaisByNomeGrupo",
                data: { nome },
                success: function (data) {
                    self.Filiais = data.clientes;
                },
                error: function (error) {
                    console.log(error);
                    alert('Erro ao executar operação.');
                }
            });
        }
    },
    mounted: function () {
        self.getGrupos();
    }
});

[...]
<section id="usuarioApp" class="content">
    <div class="modal fade" id="modal-default" style="display: none;" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Cadastrar usuário</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="selectedGrupo">Grupo</label>
                                <select class="form-control" id="selectedGrupo" v-model="Grupo.value" v-on:change="getFiliaisByNomeGrupo">
                                    <option v-for="grupo in Grupos" v-bind:value="grupo">{{grupo.Nome}}</option>
                                </select>
                            </div>
                            <div class="col-sm-6">
                                <label for="selectedFiliais">Filiais</label>
                                <multiselect v-model="FiliaisSelecionadas" placeholder="Filiais" :options="Filiais" :multiple="true" :taggable="true"></multiselect>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" v-on:click.prevent="salvar" class="btn btn-primary">Salvar</button>
                </div>
            </div>
        </div>
    </div>

</section>
<script src="~/Content/js/Views/Account/Usuarios.js"></script>

[…]
乌萨里奥地籍
格鲁波
{{grupo.Nome}}
菲律宾人
萨尔瓦多

1.您需要首先安装npm install vue multiselect--保存

2.然后需要在.js文件中导入“vue multiselect”组件

3.将vue multiselect注册为vue“AppUsario”组件实例中的组件。请参阅下文：

import Multiselect from 'vue-multiselect'

var tableUsuario;

var appUsuario = new Vue({

el: "#usuarioApp",

watch: {},

components: { Multiselect },

data: {
    Grupos: [],
    Grupo: '',
    Filiais: [],
    FiliaisSelecionadas: []
},

methods: {        
},

mounted: function () {
    self.getGrupos();
}

}))