如何将Vue数据绑定到下拉列表
[英]How to bind Vue data to a dropdown
问题描述
我正在学习Vue，在这里不能说出我做错了什么。 数据正在从服务器返回（5条记录），但是没有放入<select> ； 我得到的只是一个单独的选项，上面写着{{dept.DName}}
<html>
<head><link href="Content/bootstrap.min.css" rel="stylesheet" />
<meta charset="utf-8" />
<title></title>
</head>
<body class="container">
<div>
<select id="deptList">
<option v-model="selected" v-for="dept in app.depts" v-bind:value="dept.Did">
{{dept.DName}}
</option>
</select>
</div>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/moment.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<script src="Scripts/vue-controller.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
脚本/vue-controller.js包含：
var app = new Vue({
data: {
el: "body",
depts: [],
emps: [],
selected: ""
},
methods: {
getDepts: function () {
console.log("I'm a little teapot"); // this appears in the log
this.$http.get("/Dept/Index").then(function(response) {
this.depts = response.data;
console.log(this.depts); //the expected data does appear in the log
},
function(error) {
console.log(error.statusText);
});
}
},
created: function () {
this.getDepts();
}
})
我是C＃开发人员，所以中途确定自己搞砸了this / that上下文内容，但一直无法弄清正在发生什么。
3 个解决方案
解决方案1
6 已采纳 2017-12-04 17:46:05
有几个问题。
-
el不是数据属性，它是Vue定义对象的根属性。 - 你永远不要束缚
body。 实际上，Vue会阻止它。 绑定到主体内容中的适当元素。 -
v-model应处于选中状态。 - 您不需要
app.depts。 可以在模板中通过名称引用所有数据属性。
console.clear() const departments = [ {Did: 1, DName: "Department 1"}, {Did: 2, DName: "Department 2"}, {Did: 3, DName: "Department 3"}, ] var app = new Vue({ el: "#app", data: { depts: [], emps: [], selected: "" }, methods: { getDepts: function () { console.log("I'm a little teapot"); // this appears in the log this.$http.post("https://httpbin.org/post", departments).then(function(response) { this.depts = response.body.json; }, function(error) { console.log(error.statusText); }); } }, created: function () { this.getDepts(); } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.js"></script> <div id="app"> <select v-model="selected" id="deptList"> <option v-for="dept in depts" v-bind:value="dept.Did"> {{dept.DName}} </option> </select> <hr> Selected Department: {{selected}} </div>
注意：我修改了ajax调用，以便它可以在这种环境下工作。 假设您使用的是VueResource，则用于ajax部分的代码看起来不错。
解决方案2
0 2017-12-04 17:24:38
模板中的变量的作用域自动为“ app”，因此您需要删除“ app”。 从您的模板中，所以它将是
<select id="deptList" v-model="selected">
<option v-for="dept in depts" v-bind:value="dept.Did">
{{dept.DName}}
</option>
</select>
解决方案3
-1 2018-12-23 10:21:38
父选择元素中将知道该项目！
<select v-model="item.selectedPersonId">
<option v-for="(item, index) in personList" v-bind:value="item.personId">
{{ item.personName }}
</option>
</select>
和js代码是：
var app = new Vue({
el : "#elemName" ,
data : {
personList : [{personName = "Name1" , personId = "1"} ,
{personName = "Name2" , personId = "2"} ] ,
selectedPersonId : 0
}
});
为我工作。感谢Vuejs。
Vue 2，如何将数据绑定到“数据绑定”的元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.