django - Vue.js - 组件方法中未定义 Prop

Question

我开始将 Vue.js 集成到 Django 项目(多页应用程序)中。

首先，我尝试创建一个简单的注销组件，该组件将 POST 到用于注销的路由。路由的端点来自 Django 的 url模板标签。

端点 Prop 是 undefined在组件方法中。虽然它在组件模板中可用。我究竟做错了什么？

Django 模板

<div id="logout">
    <logout endpoint="{% url 'account_logout' %}"
            csrf_token="{{ csrf_token }}"></logout>
</div>
{% render_bundle 'logout' %}

logout.js

import Vue from 'vue'
import Logout from './Logout.vue'


new Vue({
    el: '#logout',

    components: {
        Logout
    }
});

登出.vue

<template>
    <div>
        <span class="logout-link"
              @click="performLogout">

            Logout
        </span>
    </div>
</template>


<script>
    export default {
        name: 'logout',

        props: [
            'csrf_token',
            'endpoint'
        ],

        data () {
            return {
            }
        },

        methods: {
            performLogout: event => {
                console.log(`Endpoint: ${this.endpoint}`); // <-- undefined
                // this.$http.post(this.endpoint);
            }
        }
    }
</script>


<style>
    .logout-link {
        padding: 3px 20px;
        cursor: pointer;
    }
</style>

Answer 1

存在范围界定问题 this .
this在你的方法中没有指向 vue 实例。这就是为什么您无法访问 endpoint Prop 使用 this.endpoint .

像这样尝试:

methods: {
    performLogout(event) {
        console.log(`Endpoint: ${this.endpoint}`); 
                // this.$http.post(this.endpoint);
    }
}