Question

我有一个vue multiselect的完美实例，它可以搜索我的数据选项，但是如果不在列表中，我还可以标记/添加自己的选项

    <div id="tagContent">
        <multiselect v-model="value" open-direction="bottom" :options="options" tag-placeholder="Add this as new tag" :multiple="true" :taggable="true" @tag="addTag" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="Choose Tag(s)" label="name" track-by="code">
            <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: [
                  { tag: '1', name: 'TestOne'},
                  { tag: '2', name: 'TestTwo'},
                  { tag: '3', name: 'TestThree'},
                  { tag: '123', name: 'TestFour'},  
                ]
            }
        },
        methods: {
            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');

问题是我的控制器中有用于此刀片的函数，该函数通过搜索查询命中数据库。这行得通，因此，如果我将$ s设置为一个单词并转储返回值，则该单词将获得任何结果。我的问题是：如何将多重选择的搜索绑定到该函数中，以便可以主动搜索该列表中的结果，而不是硬编码列表？

    public function searchTags()
    {   
        $s = "%" . Input::get('tagSearch') . "%";
        $search = CampaignTags::where('TAG_DATA', 'LIKE', $s)->get();

        return json_encode($search);
    }

使用Vue MultiSelect命中PHP中的数据库功能

0 个答案: