Vue.js

Question

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

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

端点属性在组件方法中 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
    }
});

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 实例。这就是为什么您无法使用 this.endpoint.

访问 endpoint 属性的原因

像这样尝试：

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

Vue.js - 组件方法中的道具未定义

Vue.js - Props are undefined in component method

django

vue-component