Question

我正在尝试使用laravel建立vue-select库

http://sagalbot.github.io/vue-select/

似乎工作正常。我用npm命令安装了它。

npm install vue-select

，当我在刀片文件中使用基本组件时，它工作正常。试过了。

<v-select :options="['foo','bar']"></v-select>

，上面的代码工作正常，并且select2下拉列表显示在页面上。

但是我想实现ajax版本，这要求我向组件添加其他javascript代码，但是我不知道在哪里添加其他代码。

这是下面的codepen链接。

https://codepen.io/sagalbot/pen/POMeOX

以下是我的JS的文件结构。

我想其中App.js是主要入口点。引导程序包括进口等。路线将包括Vue路线。

所以vue-select是一个库，我可以将它用作组件，还是可以在哪里放置JavaScript以启用select2 ajax？

我试图创建一个组件文件，并在其中添加了以下代码。

<script>
window._ = require('lodash');
export default {
    data() {
        options: []
    },
    methods: {
        onSearch(search, loading) {
            loading(true);
            this.search(loading, search, this);
        },
        search: _.debounce((loading, search, vm) => {
            fetch(
                `https://api.github.com/search/repositories?q=${escape(search)}`
            ).then(res => {
                res.json().then(json => (vm.options = json.items));
                loading(false);
            });
        }, 350)
    }
}

在刀片文件中，我这样做了。

<v-select label="name" :filterable="false" :options="options" @search="onSearch" inline-template>
                        <template slot="no-options">
                            type to search GitHub repositories..
                        </template>
                        <template slot="option" slot-scope="option">
                            <div class="d-center">
                                <img :src='option.owner.avatar_url'/>
                                @{{ option.full_name }}
                            </div>
                        </template>
                        <template slot="selected-option" slot-scope="option">
                            <div class="selected d-center">
                                <img :src='option.owner.avatar_url'/>
                                @{{ option.full_name }}
                            </div>
                        </template>
                    </v-select>

添加了一个额外的参数inline-template，但是select2框不会在页面加载时显示吗？

我还是VueJS的新手，并通过Joffery Series学习。

实施Laravel和Vue选择设置

0 个答案: