Vue.js and django rest framework for implements a cascading dropdown list - django

Question

I would need help building a request to my backend API.
I currently have a form with a drop down list. The data in this list comes from this.$Http.get('/ quality/api/affaires/')
Below this drop-down list, I have another list. This list, I would like it to be empty until the 1st is not selected, then it is implemented with data according to the selection above.
Backend side (Django) I have 2 models which are "Affaires" and "AffairesOfs". I used Serialize and I can therefore request each of these models via api/affaires and api/affairesofs
In the "AffairesOfs" model I have a foreignekey (idaffaire) on the id of the "Affaires" model.
Finally, I would like my second list to be made up of all the “affairesofs” linked to the “Affaires” selected.
For now, I have my 2 drop-down lists but I can't find a way to link the second to the first.
I tried different methods found on the internet (with the use of v-model, ...) but could not achieve a result.
I can't even get the value selected from the first list to display it in the console, or in a <span>. I think I need a change event on the first list which ask a getMethod with selected value in parameters ?
example of api/affaire :
{
"id": 1,
"nom": "HORS AFFAIRE",
"adresse": "15, rue de la Gibaudière",
"cp": "49183",
"ville": "Saint-Barthélémy d'Anjou",
"dessinateur": 0,
"conducteur": 0,
"chefdeprojet": null,
"cloture": 0
},
{
"id": 2,
"nom": "Suivi Production",
"adresse": null,
"cp": null,
"ville": null,
"dessinateur": null,
"conducteur": null,
"chefdeprojet": null,
"cloture": 0
},
example of api/affairesofs :
{
"id": 2,
"idaffaire": {
"id": 1042,
"nom": "Schlumberger",
"adresse": "",
"cp": "75007",
"ville": "Paris",
"dessinateur": null,
"conducteur": 6,
"chefdeprojet": 16,
"cloture": 1
},
"dateajout": "2015-12-14T15:08:46Z",
"statut": 2,
"type": 0,
"nom": "Chassis St Do R1 à R3",
"isanalise": 1,
"idpersonnel": 1
},
{
"id": 6,
"idaffaire": {
"id": 1045,
"nom": "LAVAL",
"adresse": "",
"cp": "53000",
"ville": "Laval",
"dessinateur": 3,
"conducteur": 9,
"chefdeprojet": 9,
"cloture": 1
},
and below there is my page :
<div id="starting">
<div class="container">
<div class="row">
<form class="form-group">
<label>N° d'affaire</label>
<select class="col" v-model="affaireSelected">
<option value="">Choisir :</option>
<option v-for="affaire in affaires" v-bind:value="affaire.id">${affaire.id} - ${affaire.nom}</option>
</select>
<span> Selectionné : {{ affaireSelected }}</span>
<label>N° d'OF</label>
<select class="col">
<option value="choisir">Choisir :</option>
<option v-for="of in ofs" :value="of.id">${of.id} - ${of.nom}</option>
</select>
<input type="submit" value="Valider" class="btn btn-success" />
</form>
</div>
</div>
<div class="loading" v-if="loading===true">Loading…/div>
</div>
<!-- vue.js files !-->
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.3.5"></script>
<script type="text/javascript">
new Vue({
el: '#starting',
delimiters: ['${','}'],
data: {
ncs: [],
affaires: [],
ofs: [],
affaireSelected: '',
loading: false,
currentNc: {},
},
mounted: function() {
this.getAffaires();
this.getOfs();
},
methods: {
getAffaires: function() {
this.loading = true;
this.$http.get('/qualite/api/affaires/')
.then((response) => {
this.affaires =response.data;
this.loading = false;
})
.catch((err) => {
this.loading = false;
console.log(err);
})
},
getOfs: function() {
this.loading = true;
this.$http.get('/qualite/api/affairesOf/')
.then((response) => {
this.ofs =response.data;
this.loading = false;
})
.catch((err) => {
this.loading = false;
console.log(err);
})
},
}
});
</script>

Answer 1

Finally found a solution. I need to use a computed property juste like this :
computed: {
ofsByAffaire() {
return this.ofs.filter(oF => oF.idaffaire.id === this.affaireSelected.id);
}
},
then, I juste have to use this computed property on the template :
<select class="col">
<option value="choisir">Choisir :</option>
<option v-for="of in ofsByAffaire" :value="of.id">${of.id} - ${of.nom}</option>
</select>