用于实现级联下拉列表的 Vue.js 和 django rest 框架

Posted 2023-02-24

【中文标题】用于实现级联下拉列表的 Vue.js 和 django rest 框架

【英文标题】：Vue.js and django rest framework for implements a cascading dropdown list

【发布时间】：2020-08-05 15:32:14

【问题描述】：

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

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

后端 (Django) 我有 2 个模型，分别是“Affaires”和“AffairesOfs”。我使用了 Serialize，因此我可以通过 api/affaires 和 api/affairesofs 请求这些模型中的每一个

在“AffairesOfs”模型中，我在“Affaires”模型的 id 上有一个外键（idaffaire）。 最后，我希望我的第二个列表由与所选“事务”相关的所有“事务”组成。 现在，我有两个下拉列表，但我找不到将第二个链接到第一个的方法。 我尝试了在互联网上找到的不同方法（使用 v-model，...），但无法获得结果。 我什至无法从第一个列表中选择值以将其显示在控制台或<span> 中。我想我需要在第一个列表上设置一个更改事件，该事件询问参数中具有选定值的 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>

【参考方案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>