title: Vue multiselect with axios call to database, laravel
body: <p>For some reason, I can't quite figure out how to get an 'autocomplete' style multiselect with Vue working properly.</p>
  
  <p>I properly set the route that is being called in my axios block, and the controller is set to use the query as a way to hit the database with a LIKE clause, but something is going wrong somewhere and my multiselect is not being filled with results from database that would make it searchable.</p>
  
  <p>What am I doing wrong here?</p>
  
  <p>Route:</p>
  
  <pre><code>Route::get('search', 'Controller@searchTags')
      -&gt;name('search');
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>public function searchTags(Request $request)
  {
      if ($request-&gt;get('query')) {
          $query = $request-&gt;get('query');
          $data = TAGS::where('TAG_DATA', 'LIKE', "%{$query}%")-&gt;get();
  
          $output = '&lt;ul class="dropdown-menu" style="display:block; position:relative"&gt;';
          foreach ($data as $row) {
              $output .= '&lt;li&gt;&lt;a href="#"&gt;' . $row-&gt;tag_data . '&lt;/a&gt;&lt;/li&gt;';
          }
          $output .= '&lt;/ul&gt;';
  
          return $output;
      }
  }
  </code></pre>
  
  <p>Blade:</p>
  
  <pre><code>&lt;div id="tagContent"&gt;
      &lt;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"&gt;
          &lt;template slot="selection" slot-scope="{ values, search, isOpen }"&gt;&lt;span class="multiselect__single" v-if="values.length &amp;amp;&amp;amp; !isOpen"&gt;{{ values.length }} options selected&lt;/span&gt;&lt;/template&gt;
      &lt;/multiselect&gt;
  &lt;/div&gt;
  
  new Vue({
          components: {
              Multiselect: window.VueMultiselect.default
          },
          data () {
              return {
                  value: [],
                  options: []
              }
          },
          methods: {
              read(){
                  window.axios.get('campaigns/search').then(({ data }) =&gt;{
                      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');
  </code></pre>