Vue.js和django rest框架，用于实现层叠式下拉列表。

Question

我需要帮助构建一个请求到我的后端API.我目前有一个带有下拉列表的表单。这个列表中的数据来自于 this.$Http.get('/ quality/api/affaires/')

在这个下拉列表下面，我还有一个列表。这个列表，我希望它是空的，直到第1个列表没有被选中，然后根据上面的选择来实现数据。

后台（Django）我有2个模型，分别是 "Affaires "和 "AffairesOfs"。我使用了Serialize，因此我可以通过以下方式来请求每个模型 api/affaires 和 api/affairesofs

在 "AffairesOfs "模型中，我在 "Affaires "模型的id上有一个foreignekey(idaffaire).最后，我希望我的第二个列表是由所有 "affairesofs "组成的，链接到所选的 "Affaires".目前，我有两个下拉列表，但我无法找到一种方法将第二个列表链接到第一个列表。 我尝试了在互联网上找到的不同方法（使用v-model，...），但无法取得结果。我甚至无法从第一个列表中获得所选的值，以在控制台中显示它，或在一个.我想我需要在第一个列表中的变化事件，要求在参数中包含所选值的getMethod？

apiaffaire的例子。

    {
    "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
},

apiaffairesofs的例子。

{
        "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/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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

终于找到了一个解决方案。我需要使用一个计算的属性，就像这样。

    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>