Vue.js - Props are undefined in component method

Question

I am beginning to integrate Vue.js in to a Django project (multi-page application).

To start I am trying to create a simple logout component that will POST to the route for logout. The endpoint for the route comes from Django's url template tag.

The endpoint prop is undefined within the component method. Though it is available within the component template. What am I doing wrong?

---

Django Template

<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

There is a scoping issue of this.

this in your method does not point to the vue instance. That's why you can't access endpoint prop using this.endpoint.

Try it like this :

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