title: Populate a drop-down in Vue.js from an ajax call
body: <p>I want to be able to make an ajax call and to use the results returned to generate the options of a drop-down using <a href="/questions/tagged/vue.js" class="post-tag" title="show questions tagged &#39;vue.js&#39;" rel="tag">vue.js</a>. 
  I can do this: </p>
  
  <pre><code>&lt;select v-model="selected"&gt;
    &lt;option v-for="option in options" v-bind:value="option.value"&gt;
      {{ option.text }}
    &lt;/option&gt;
  &lt;/select&gt;
  &lt;span&gt;Selected: {{ selected }}&lt;/span&gt;
  </code></pre>
  
  <p>.js file</p>
  
  <pre><code>new Vue({
    el: '...',
    data: {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  })
  </code></pre>
  
  <p>But I don't want to have my options hard coded but instead to come from the ajax call. </p>
  
  <p>Ajax call looks something like this:</p>
  
  <pre><code>function pullEmployees(){
          var eventOwnerId = $('#eventOwner').val();
          var eventOwnerName = $('#eventOwner :selected').text();
          $.ajax({
              url: "employees.cfm",
              data: {
                  eventOwnerId: eventOwnerId,
                  eventOwnerName: eventOwnerName,
                  method : "updateOwners"
              },
  
              success: function(results) {
                // results will have a list of objects where each objects has     two properties (ID and Value)
              }
      });
  }
  </code></pre>
  
  <p>I am really new in <a href="/questions/tagged/vue.js" class="post-tag" title="show questions tagged &#39;vue.js&#39;" rel="tag">vue.js</a> and I would appreciate if someone can help. </p>