In AdonisJS, I can't figure out why i keep getting "undefined" in my dropdown menu. My form uses the v-for directive to loop through "test" which is an array of objects, so i am expecting the dropdown to show the item.name but it shows "undefined". Can anyone help a newbee AdonisJS learner. Thanks Below is my code. PS: the same code works in outside of AdonisJS, when i save the file as a plain .html file.
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
<form action="/" method="POST">
<select v-model="Selected">
<option v-for="item in test" v-bind:value="item.name" >
{{ item.name }}
</option>
</select>
<input type="submit" value="Submit" class="btn btn-primary">
</form>
</div>
<script>
new Vue({
el: '#app',
data: {
test: [
{ id:1, name:"adam"},
{ id:2, name:"lena"},
{ id:3, name:"hamza"},
],
Selected: "",
},
})
</script>
</body>
</html>
