Vue. js и django rest framework для реализации каскадного выпадающего списка

Question

Мне потребуется помощь при создании запроса к моему бэкэнд-API. В настоящее время у меня есть форма с выпадающим списком. Данные в этом списке взяты из this.$Http.get('/ quality/api/affaires/')

Ниже этого раскрывающегося списка у меня есть другой список. Этот список, я хотел бы, чтобы он был пустым, пока 1-й не выбран, затем он реализуется с данными в соответствии с выбором выше.

Внутренняя сторона (Django) У меня есть 2 модели, которые "Affaires" "и" AffairesOfs ". Я использовал Serialize, и поэтому могу запрашивать каждую из этих моделей через api/affaires и api/affairesofs

. В модели AffairesOfs у меня есть иностранный ключ (idaffaire) для идентификатора модели Affaires. Наконец, я хотел бы, чтобы мой второй список состоял из всех «дел», связанных с выбранными «делами». На данный момент у меня есть 2 раскрывающихся списка, но я не могу найти способ связать второе с первым. Я пробовал разные методы, найденные в inte rnet (с использованием v-модели, ...), но не смог достичь результата. Я даже не могу получить значение, выбранное из первого списка, чтобы отобразить его в консоли или в. я думаю, что мне нужно событие изменения в первом списке, который запрашивает getMethod с выбранным значением в параметрах?

пример 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
},

пример 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
        },

и ниже есть моя страница:

    <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&#8230;/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

Наконец-то нашли решение. Мне нужно использовать вычисляемое свойство juste следующим образом:

    computed: {
    ofsByAffaire() {
        return this.ofs.filter(oF => oF.idaffaire.id === this.affaireSelected.id);
    }
},

тогда я просто должен использовать это вычисленное свойство в шаблоне:

<select class="col">
    <option value="choisir">Choisir :</option>
    <option  v-for="of in ofsByAffaire" :value="of.id">${of.id} - ${of.nom}</option>
</select>