Django, Vue - 如何将道具从 Django 传递到 Vue

Question

背景 大家好，尝试使用 Django 和 VUE 构建一个“回顾性应用程序”。我已经创建了登录名和仪表板，其中显示了由登录用户创建的“板”列表。板是任何有链接的人都可以添加和登录的主题表。

问题 当我点击 board 时，它会显示 DB 中的所有主题，如何将 board 的“PK”从 Vue CDN 传递到 Django DRF 以获得过滤结果。

环境：Django、VUE.js、Django Rest 框架

请注意：对 Django 和 VUE 非常陌生，这是我人生中的第一个项目，过去 8 个月的学习，请放轻松。

下面是 Board.html，带有 Vue CDN。

{% load static %}
{% block content %}
<div id="app">
    <div class="container">
        <form @submit.prevent="submitForm">
            <div class="form-group row">
                <input type="text" class="form-control col-3 mx-2" placeholder="Todo" v-model="retroboard.todo">
                <input type="text" class="form-control col-3 mx-2" placeholder="inprogress"
                    v-model="retroboard.inprogress">
                <input type="text" class="form-control col-3 mx-2" placeholder="Action Items" v-model="retroboard.done">
                <button class="btn btn-success">Submit</button>
            </div>
        </form>
        <!-- <div>
            <form method="POST">
                {% csrf_token %}
                {{form.todo}}
                {{form.inprogress}}
                {{form.done}}
                <button class="btn btn-primary">Add</button>
            </form>
      
        </div> -->
        <table class="table">
            <thead>
                <th>Todo</th>
                <th>InProgress</th>
                <th>Done</th>
            </thead>
            <tbody>
                <tr v-for="board in retroboards" :key="board.id" @dblclick="$data.retroboard = board">
                    <td>[[ board.todo ]]
                        <a href=" "> <i class=" fa fa-heart"></i> </a>
                        <a href=" "> <i class="fa fa-trash"></i> </a>
                    </td>
                    <td>[[ board.inprogress ]]</td>
                    <td>[[ board.done ]]</td>
                    <td> <button class="btn btn-outline-danger btn-sm mx-1" @click="deleteTopic(board)">x</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        delimiters: ['[[', ']]'],
        data() {
            return {
                retroboard: {
                    "todo": '',
                    "inprogress": '',
                    "done": '',
                    "id": ''
                },
                retroboards: [],
            }
        },
        async created() {
            await this.getRetroTopics();
        },
        methods: {

            submitForm() {
                if (this.retroboard.id === undefined) {
                    this.createRetroTopic();
                } else {
                    this.editRetroTopic();
                }
            },
            async getRetroTopics() {
                var response = await fetch("http://127.0.0.1:8000/api/retroboard/");
                this.retroboards = await response.json();
            },
            async createRetroTopic() {
                await this.getRetroTopics()
                await fetch("http://127.0.0.1:8000/api/retroboard/", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': csrftoken,
                    },
                    body: JSON.stringify(this.retroboard)
                });
                // this.retroboards.push(await response.json());
                await this.getRetroTopics();
                this.retroboard = {};
            },

            async editRetroTopic() {
                await this.getRetroTopics()
                await fetch(`http://127.0.0.1:8000/api/retroboard/${this.retroboard.id}/`
                    , {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': csrftoken,
                        },
                        body: JSON.stringify(this.retroboard)
                    });
                await this.getRetroTopics();
                this.retroboard = {};
            },

            async deleteTopic(retroboard) {
                await this.getRetroTopics()
                await fetch(`http://127.0.0.1:8000/api/retroboard/${retroboard.id}/`
                    , {
                        method: 'delete',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': csrftoken,
                        },
                        body: JSON.stringify(this.retroboard)
                    });
                await this.getRetroTopics();
            }

        }

    })
</script>

{% endblock %}```

Answer 1

有点晚了，但是。

我建议你使用带有道具的插槽。大多数时候，这是将 Django vars 提供给 vue 的最佳方式。

例如：

index.js：

let myComponent = {
    data    : function() {
        return {
            in_message : "Hello World !",
        }
    },
    props   : {
        p_url   : String,
        p_pk    : Number,
    },
    methods     : {},
    template    : " \
        <div alt='Slot must be surround'> \
            <slot \
                :out_message='in_message' \
            ></slot> \
        </div> \
    ",
}

var app = new Vue({
    delimiters  : ['[[', ']]'],
    el          : '#app',
    components  : {
        myComponent
    },
})

index.html

<html>
    <head>
        <title>Django | VueJS {% trans " are working together "%}</title>
    </head>
    <body>
        {% with message="Django" url="/" pk=1 %}
            <my-component
                p_url='{{ url }}'
                p_pk='{{ pk}}'
            >
                <template v-slot:default='my_slot_name'>
                    <p>{{message}} | [[ my_slot_name.out_message ]] </p>
                </template>
            </my-component>
        {% endwith %}
    </body>
</html>

vuejs 和 django 还有很多其他技巧可以让它们一起工作得很好，如果需要，可以给我留言。