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

Question

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

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

后端（Django） 我有 2 个模型，分别是“Affaires”和“AffairesOfs”。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>

标签： djangoajaxvue.jsdjango-rest-framework

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>