javascript – 在ajax调用中填充Vue.js中的下拉列表
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 在ajax调用中填充Vue.js中的下拉列表,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2180字,纯文字阅读大概需要4分钟。
内容图文
![javascript – 在ajax调用中填充Vue.js中的下拉列表](/upload/InfoBanner/zyjiaocheng/811/3c90aceb51a64e419b005c954aa3d718.jpg)
我希望能够进行ajax调用并使用返回的结果生成使用vue.js的下拉列表选项.
我可以做这个:
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
.js文件
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
但我不想让我的选项硬编码,而是来自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.js的新人,如果有人可以提供帮助,我将不胜感激.
解决方法:
在下面的示例中,我使用setTimeout模拟您的ajax调用.基本上你想要在变量中捕获新的Vue()的结果,然后用你的ajax调用的结果设置该Vue的options属性.
我还更新了您的模板,以反映您返回的选项具有{ID,text}结构.
console.clear()
let app = new Vue({
el: '#app',
data: {
selected: 'A',
options: []
}
})
function pullEmployees(){
let options = [
{ text: 'One', ID: 'A' },
{ text: 'Two', ID: 'B' },
{ text: 'Three', ID: 'C' }
];
setTimeout(() => app.options = options, 1000)
}
pullEmployees()
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="app">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.ID">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
但是所有这一切都可以在Vue内部完成.它不需要在外面完成.
let app = new Vue({
el: '#app',
data: {
selected: 'A',
options: []
},
methods:{
pullEmployees(){
var eventOwnerId = $('#eventOwner').val();
var eventOwnerName = $('#eventOwner :selected').text();
$.ajax({
url: "employees.cfm",
data: {
eventOwnerId: eventOwnerId,
eventOwnerName: eventOwnerName,
method : "updateOwners"
},
success: results => this.options = results
});
}
},
mounted(){
this.pullEmployees()
}
})
如果eventOwner也是Vue的一部分,那么你可以从Vue获取该值作为数据属性.
内容总结
以上是互联网集市为您收集整理的javascript – 在ajax调用中填充Vue.js中的下拉列表全部内容,希望文章能够帮你解决javascript – 在ajax调用中填充Vue.js中的下拉列表所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。