I am currently learning how to use Vue.js. Below is an example of the Javascript code I have written:
new Vue({
el: '#app',
data: {
classes: []
},
created: function () {
var vm = this
// Fetch API
fetch(xxx.json)
.then(function (response) {
return response.json();
})
.then(function (data) {
vm.classes = data.classes;
})
}
});
This program fetches a JSON file first. Here is an example of the JSON format:
{
"classes": [
{
"name": "A",
"students": [
{
"name": "Eric",
"fruit": [
"apple",
"banana",
"orange"
]
},
{
"name": "Eickson",
"fruit": [
"banana",
"orange"
]
}
]
},
{
"name": "B",
"students": [
{
"name": "Ethan",
"fruit": [
"banana",
"apple"
]
}
]
}
]
}
The JSON data is then placed into the data. The goal is to allow users to select items in each class and use HTML to display each class and student.
The HTML code looks like this:
<div class="row">
<div class="col-3" v-for="class in classes">
Class name: {{ class.name}}</br>
<div class="form-group row" v-for="student in cless.students">
<label class="col-form-label col-sm-2">{{ student.name }}</label>
<div class="col-sm-10">
<select class="form-control" :name="class.name+'-'+student.name">
<option></option>
<option v-for="fruit in class.fruit">{{fruit}}</option>
</select>
</div>
</div>
</div>
</div>
<button type="submit" " class="btn btn-primary">Submit</button>
I want to use the submit button to retrieve all selected options. I tried using a method within the function, with the button having @click="submitFunc(), but I'm unsure how to proceed.
If you can provide guidance on how to implement this, it would be greatly appreciated. Thank you!