注册和使用Vue-Multiselect组件

Question

我想在我的应用程序中注册和使用Vue-Multiselect组件，但是我是新手。我将试图简化我的代码，我想得到一个帮助如何做它。

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

下面是指向组件的链接：https://vue-multiselect.js.org/

我的代码：

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();
    }
});

Usuarios.cshtml:

[...]
<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>

Answer 1

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

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

3.注册vue -在vue 'appUsuario‘组件实例中作为组件t进行多选择。请参阅下文：

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();
}

})；