Javascript Vue multiselect与axios对数据库的调用，laravel

由于某些原因，我不太明白如何在Vue正常工作的情况下获得“自动完成”样式的multiselect

我正确地设置了axios块中调用的路由，并且控制器被设置为使用查询作为使用LIKE子句访问数据库的方式，但是在某个地方出了问题，并且我的multiselect没有被来自数据库的结果填充，这将使其可搜索

我做错了什么

路线：

Route::get('search', 'Controller@searchTags')
    ->name('search');

控制器：

public function searchTags(Request $request)
{
    if ($request->get('query')) {
        $query = $request->get('query');
        $data = TAGS::where('TAG_DATA', 'LIKE', "%{$query}%")->get();

        $output = '<ul class="dropdown-menu" style="display:block; position:relative">';
        foreach ($data as $row) {
            $output .= '<li><a href="#">' . $row->tag_data . '</a></li>';
        }
        $output .= '</ul>';

        return $output;
    }
}

公共函数搜索标签（请求$Request）
{
如果（$request->get（'query'））{
$query=$request->get（'query'）；
$data=TAGS:：where（'TAG_data'，'LIKE'，“%{$query}%”）->get（）；
$output='
；
foreach（$行数据）{
$output.='
'；
}
$output.='
'；
返回$output；
}
}

刀片：

<div id="tagContent">
    <multiselect v-model="value" open-direction="bottom" :options="options" :multiple="true" :close-on-select="false" :taggable="true" :clear-on-select="false" :preserve-search="true" placeholder="Add Tag(s)" label="name" track-by="name">
        <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length &amp;&amp; !isOpen">{{ values.length }} options selected</span></template>
    </multiselect>
</div>

new Vue({
        components: {
            Multiselect: window.VueMultiselect.default
        },
        data () {
            return {
                value: [],
                options: []
            }
        },
        methods: {
            read(){
                window.axios.get('campaigns/search').then(({ data }) =>{
                    console.log(data)
                });
            },
            addTag (newTag) {
              const tag = {
                name: newTag,
                code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
              }
              this.options.push(tag)
              this.value.push(tag)
            }
        }
    }).$mount('#tagContent');

{{values.length}}已选择选项
新Vue({
组成部分：{
Multiselect:window.VueMultiselect.default
},
数据（）{
返回{
值：[]，
选项：[]
}
},
方法：{
读（）{
get（'活动/搜索'）。然后（{data}）=>{
console.log（数据）
});
},
地址标签（新标签）{
常量标记={
姓名:newTag,，
代码：newTag.substring（0，2）+Math.floor（（Math.random（）*10000000））
}
this.options.push（标记）
this.value.push（标记）
}
}
}).$mount（“#tagContent”）；

我相信您的示例中缺少了一些东西

当搜索输入更改时，您需要触发

读取

功能-使用

@search change

事件进行此操作

您需要将axios请求的结果发送到

this.options

，以便

multiselect

组件可以使用这些结果

---

在中，我使用超时模拟了数据请求，但您应该明白了。您还可以使用

加载
属性让用户知道幕后发生了什么事情。
看起来您并没有要求vue对axios请求返回的数据做任何事情。我还怀疑，如果您只是从路由返回数据，然后让vue处理标记创建，您会更轻松。就您的第二条评论而言，您的意思是什么？@ebbishop我应该为返回的数据做些什么？我想这就是我现在最困的地方。页面加载时要加载的元素太多，因此我真的想尝试axios对AutoCompleteTit的调用，它需要作为选项发送到vue multiselect组件，以便该组件可以呈现数据。看起来您打算使用vue数据属性
options
来填充multiselect-当您从路由返回数据时，可以执行类似
this.options=data
的操作。我不清楚的是，为什么要使用控制器将数据处理为标记，以及您对该标记的预期。没错，控制器有一些剩余的格式，我保留用于测试，但我明白您的意思。我可以删除格式，然后将结果作为json对象返回，我想我现在看到了，谢谢！所以我的axios调用实际上就是超时函数所在的位置，我可以在那里设置this.options=data
axios.get（'campetings/search'）。然后（response=>this.options=response.data）。catch（error=>{}）类似的东西？@TomN。是的！试一试。我实际上改变了它，这样它就可以在控制器中发送我需要的‘查询’：
axios.get（'campetings/search'，{params:{query:this.val}）。然后（函数（response）{self.options=response.data；}）但仍然没有结果。但是，我在控制台中看到了所有数据的json响应