While diving into Vue.js, I'm encountering a puzzling issue. Despite receiving data from the server (5 records), it's not populating the <select> element properly. Instead of multiple options, all I see is a single one displaying {{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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e787b6b237c6b7d617b7c6d6b4e3f203d203a">[email protected]</a>"></script>
<script src="Scripts/vue-controller.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
The file vue-controller.js contains:
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();
}
})
As a C# developer, I suspect I may be mishandling the this/that context, but I haven't been able to pinpoint the exact cause.