从ajax调用在Vue.js中填充下拉列表

我希望能够进行ajax调用，并使用返回的结果生成下拉菜单选项。 我可以这样做：

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

但是我不想让我的选项硬编码，而是来自ajax调用

Ajax调用如下所示：

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)
            }
    });
}

---

我是新来的，如果有人能帮我，我将不胜感激

将vue实例存储为变量：

var vue = new Vue(// stuff...);

对于Ajax，请注意以下范围：

---

在下面的示例中，我使用setTimeout模拟ajax调用。基本上，您希望在变量中捕获新Vue的结果，然后使用ajax调用的结果设置该Vue的options属性

我还更新了模板，以反映返回的选项具有结构{ID，text}

控制台。清除 让应用程序=新Vue{ el:“应用程序”， 数据：{ 选定：“A”， 选项：[] } } 职能雇员{ 让选项=[ {text:'One'，ID:'A'}， {text:'Two'，ID:'B'}， {text:'Three'，ID:'C'} ]; setTimeout=>app.options=options，1000 } 雇员 {{option.text} 已选定：{{Selected}

---

到目前为止有什么问题？目前我在您的代码中看到的唯一问题是，成功回调中不会出现Vue。我的问题是，我不知道如何将ajax调用的结果附加到Vue对象的options属性。如果你在我上面的示例中看到，我已经硬编码了选项文本：“一”，值：“A”，文本：“二”，值：“B”等等。你说的对象是{id，value}。它们需要是{text，value}吗？实际上这是一个输入错误，它们的名称是{ID，text}。顺便问一下，我是否必须以某种方式告诉vue实例哪个是我的id，哪个是我的文本，或者告诉行this.vue.data.options=results；你知道如何呈现下拉列表吗？员工在哪里？它是vue方法还是vue之外的函数？结果究竟是什么？只是一个选项对象数组？在我的vue实例上，是否以空字符串形式启动选项属性？数据：{options:=}您可能应该将其初始化为空数组。谢谢，我将在一分钟内尝试一下。您能给我一个如何将eventOwner放入Vue的示例吗。您可以从我的代码中看到我现在是如何从DOM中读取这些值的。还有el:app这是否意味着select的ID是app？@DoArNa我在玩你的代码时创建了这个。它显示了你将如何做到这一点。在进行ajax调用时，它会抛出一个错误，因为显然我没有访问您的服务器的权限。此外，您可能希望在所有者更改时获得选项，而不是挂载。我非常感谢您在这方面花费的时间来帮助我。据我所知，当页面加载时，它将加载带有Mary和Bob的下拉列表。然而，我想要的是，当页面加载时，下拉列表具有来自ajax调用的选项。我知道您希望能够有一个工作模型，因为您无法访问服务器，但至少代码将如何编写？页面上没有任何条件可以在页面加载后更改列表选项，因此我不需要再担心更新select元素。

var vue = new Vue(// stuff...);

function pullEmployees(){
        var _this = this; // bind "this" to local var
        var eventOwnerId = $('#eventOwner').val();
        var eventOwnerName = $('#eventOwner :selected').text();
        $.ajax({
            url: "employees.cfm",
            data: {
                eventOwnerId: eventOwnerId,
                eventOwnerName: eventOwnerName,
                method : "updateOwners"
            },

            success: function(results) {
              _this.vue.data.options = results; // set data
            }
    });
}